情景一:只要求滑动遮罩区域时,底部内容不可滚动
在 遮罩层 设置 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
})
},