小程序中的几种情况下滑动穿透解决方案

情景一：只要求滑动遮罩区域时，底部内容不可滚动    

    在 遮罩层 设置 catchtouchmove 函数

<view class='{{cover}}' data-id='first' catchtouchmove="preventD"></view>

    在 js 页面设置该函数

preventD: function() {
    return
},

 

情景二：要求在弹出框内滑动时，弹框中的内容和遮罩底部内容都不可滚动

    在 弹框 的最外层 view 设置如下

<view class="changeCon {{changeConIn}}" id="overlay" catchtouchmove="false">
</view>

 

情景三：要求在弹出框内滑动时，弹框内的内容可滚动，但遮罩底部内容不可滚动

    设置垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。

    缺点：上拉加载和下拉刷新这 2 个钩子函数无效，需使用 scroll-view 自身的事件，但效果不好，所以这个方法不适合需要做上拉加载和下拉刷新的列表页等页面，但是适合其他页面。

<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
    底部内容
    弹框
</scroll-view>
<view class="modal"></view>

onLoad: function (options) {
    /*获取屏幕高度*/
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight
    })
  },