小程序遮罩層遮住頁面后滾動穿透問題分為兩種情況：
1.蒙層mask沒有滾動事件的情況
可以在mask這個view上直接添加事件catchtouchmove="ture"來防止?jié)L動或者寫一個方法也可以
代碼如下：
<view class="mask" wx:if="{{showModelcontact}}" catchtouchmove="prevent"></view>
<!-- js -->
prevent:function(){}
2.如果蒙層mask有滾動事件的情況
這種情況需要在主體內(nèi)容view上加一個固定定位的class腐巢，這個class和mask同時顯示同時消失
代碼如下：
<view class="mask" wx:if="{{showModelcontact}}"></view>
<!-- 遮罩下面的頁面內(nèi)容 -->
<view class="content {{showModelcontact?'prevent':' '}}"></view>
<!-- js -->
Page{
...
//通過事件顯示遮罩
showMask:function(){
var that = this;
that.setData({
showModelcontact: true
})
},
//隱藏遮罩層
hiddenMask:function(){
var that = this;
this.setData({
showModelcontact: false
})
}
...
}
<!-- css -->
/* 設(shè)置內(nèi)容的css prevent 且這內(nèi)容層級(z-index)要比蒙層的低 */
.prevent{
position: fixed ;
top: 0px ;
left: 0px ;
width: 100% ;
height: 100% ;
overflow: hidden ;
z-index: 0 ;
}
這個遮罩滾動穿透問題這樣解決，但是在開發(fā)工具上面還是可以滾動轩娶，手機實際預(yù)覽就不會出現(xiàn)這個問題了
希望能幫到大家黍少，也便于自己記錄Ｅ稀Ｅ纭憨颠！
