小程序 遮罩层(阻止事件穿透)
- 若弹出层没有滚动事件
直接在蒙板上加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 ;
}