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

• 若彈出層沒有滾動事件
  直接在蒙板上加catchtouchmove=“preventTouchMove” 即可

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

• 若彈出層有滾動事件
  需要動態(tài)監(jiān)聽遮罩層的現(xiàn)實和隱藏，然后給底部滾動內(nèi)容添加動態(tài)樣式即可，消失時去除改樣式。

<view class="mask" wx:if="{{hasMask}}">我是遮罩層 </view> <view class="content" class="{{hasMask ? 'preventTouchMove' : ' '}}">我是頁面內(nèi)容 </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 ; }

總結(jié)

以上是生活随笔為你收集整理的小程序 遮罩层（阻止事件穿透）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。