解決小程式遮罩層滾動穿透問題

rosenWang發表於2018-12-06
遮罩穿透

遮罩層滾動穿透分為兩種情況，即彈出層是否滾動

1.彈出層沒有滾動事件

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

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

//js
preventTouchMove: function(){return}複製程式碼

2.彈出層有滾動事件

需要動態監聽遮罩層的現實和隱藏，然後給底部滾動內容新增動態樣式即可，消失時去除改樣式。

<view class="mask" wx:if="{{hasMask}}">
    我是遮罩層
</view>

<view class="content" class="{{hasMask ? 'preventTouchMove' : ' '}}">
    我是頁面內容
</view>
<!-- js -->
Page{
    ...
    showMask(e){
        //顯示遮罩
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //隱藏遮罩
        this.setData({
            hasMask:false
        })
    },
}
<!-- css-->
.preventTouchMove{
    top: 0px ; 
    left:   0px ; 
    width:   100% ; 
    height:   100% ; 
    overflow:   hidden ; 
    position:   fixed ; 
    z-index:   0 ; 
}複製程式碼


相關文章