小程序 遮罩层（阻止事件穿透）

小程序 遮罩层（阻止事件穿透）

直接在蒙板上加catchtouchmove=“preventTouchMove” 即可

<view class="mask" catchtouchmove="preventTouchMove">我是遮罩层</view>

若弹出层有滚动事件

需要动态监听遮罩层的现实和隐藏，然后给底部滚动内容添加动态样式即可，消失时去除改样式。

<view class="mask" wx:if="{{hasMask}}">我是遮罩层</view><view class="content" class="{{hasMask ? 'preventTouchMove' : ' '}}">我是页面内容</view>

Page{showMask(e){//显示遮罩this.setData({hasMask:true})},hideMask(e){//隐藏遮罩this.setData({hasMask:false})},}

.preventTouchMove{position: fixed ; top: 0px ; left: 0px ; width: 100% ; height: 100% ; overflow: hidden ; z-index: 0 ; }