小程序遮罩层上下滑动穿透 ---- 解决方法

方法：最外层元素加上事件：catchtouchmove=“stopPageScroll”
遮罩层元素加上事件：catchtouchmove=“stopPageScroll”
遮罩层显示时 this.setData({ stopPageScroll:“stopPageScroll” })
遮罩层消失时 this.setData({ stopPageScroll:"" })
stopPageScroll(){ return }

WXML:

<view catchtouchmove='{{stopPageScroll}}'>
<view wx:for="{{100}}" wx:key="key">{{index+1}}</view>
</view>

<view class='btn'>
<text bindtap='maskShowfun'>显示</text>
<text bindtap='maskHidefun'>隐藏</text>
</view>
<view class='mask' wx:if="{{maskShow}}" catchtouchmove='{{stopPageScroll}}'></view>

WXSS:

.mask{
width:100%;
height:100%;
top:0;
background:rgba(0,0,0,0.5);
overflow: hidden;
position: fixed;
z-index: 1;
}
.btn{
display: flex;
font-size: 40rpx;
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
z-index: 99;
}
.btn text{
width:50%;
height:100%;
display:flex;
align-items: center;
justify-content:center;
color:#fff;
}
.btn text:nth-child(1){
background: #ddd;
}
.btn text:nth-child(2){
background: red;
}

JS：

Page({
data: {
stopPageScroll:"",
maskShow:false
},
maskShowfun(){
this.setData({
stopPageScroll: "stopPageScroll",
maskShow:true
})
},
maskHidefun(){
this.setData({
stopPageScroll: "",
maskShow: false
})
},
stopPageScroll(){return}

})