uni-app微信小程序中遮罩层的滚动穿透问题

2,452 阅读1分钟

     今天在ios真机调试上发现滑动弹窗里面的列表,弹窗下面的页面也会出现滚动,在安卓上没有发现,iosYYDS!!!后面查资料发现是滚动穿透的问题。

     有两种解决方案:

  1. 非滑动弹窗: @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数(官方文档)

    <view class="mask" @touchmove.stop.prevent="moveHandle"></view>
    
  2. 滑动弹窗:如果使用上面那个方法会导致弹窗里面的列表也不可以滑动,想到两种方案:

    • 如果页面使用了scroll-view, 动态设置scroll-y,出现弹窗的时候设置为false即可

    • 给底部标签动态添加class

      <view :class="{ showList ? 'show-list' : ''}"><view>
      .show-list {
          position: fixed;
          top:0px;
          left0px;
          width100vw;
          height100vh;
          overflow: hidden;
          z-index0;
      }