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

方法：最外层元素加上事件：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}

})