【小程序】解决小程序遮罩层滑动事件的穿透问题

1、问题描述：

滑动自定义的遮罩层，会出现滚动穿透的问题，如下图，即遮罩层下面的列表页面依旧可以滚动。

2、解决办法：分为两种情况：

情况1：【遮罩层没有滚动事件】

直接在遮罩层的父节点上添加catchtouchmove="preventTouchMove"属性，例如：

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

在page.js中添加空的preventTouchMove方法，例如：

preventTouchMove:function(){}

 

情况2：【遮罩层存在滚动事件】

在遮罩层出现的时候给底部的containerView加上一个class属性，在遮罩层消失的时候移除，例如：

<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 ; 
}

 

3、注意：此时问题已经得到解决，但是在微信开发者工具中操作时，依然会出现问题。

这算是工具的bug，没事儿，到真机上是好的哦。

微信开发者工具中出现问题的原因我猜想是：工具不认得catchtouchmove方法：因为我看到控制台打印下面一段话：

大家可以自己体会，总之，真机上显示正常万岁！！！