今天在ios真机调试上发现滑动弹窗里面的列表,弹窗下面的页面也会出现滚动,在安卓上没有发现,iosYYDS!!!后面查资料发现是滚动穿透的问题。
有两种解决方案:
-
非滑动弹窗:
@touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数(官方文档)<view class="mask" @touchmove.stop.prevent="moveHandle"></view> -
滑动弹窗:如果使用上面那个方法会导致弹窗里面的列表也不可以滑动,想到两种方案:
-
如果页面使用了scroll-view, 动态设置scroll-y,出现弹窗的时候设置为false即可
-
给底部标签动态添加class
<view :class="{ showList ? 'show-list' : ''}"><view> .show-list { position: fixed; top:0px; left: 0px; width: 100vw; height: 100vh; overflow: hidden; z-index: 0; }
-