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

• 若彈出層沒有滾動事件
  直接在蒙板上加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 ; }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。