1.解决小程序遮罩层遮住页面后滚动穿透问题

Posted 2021-09-07 爱吃鱼的宇

小程序遮罩层遮住页面后滚动穿透问题分为两种情况：
1.蒙层mask没有滚动事件的情况
可以在mask这个view上直接添加事件catchtouchmove="ture"来防止滚动或者写一个方法也可以
代码如下：

    <view class="mask" wx:if="{{showModelcontact}}" catchtouchmove="prevent"></view>
    <!-- js --> 
    prevent:function(){}

2.如果蒙层mask有滚动事件的情况
这种情况需要在主体内容view上加一个固定定位的class，这个class和mask同时显示同时消失
代码如下：

  <view class="mask" wx:if="{{showModelcontact}}"></view>
  <!-- 遮罩下面的页面内容 -->
  <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 -->
/* 设置内容的css prevent 且这内容层级(z-index)要比蒙层的低 */
  .prevent{
    position:   fixed ; 
    top: 0px ; 
    left:   0px ; 
    width:   100% ; 
    height:   100% ; 
    overflow:   hidden ; 
    z-index:   0 ; 
  }

这个遮罩滚动穿透问题这样解决，但是在开发工具上面还是可以滚动，手机实际预览就不会出现这个问题了
希望能帮到大家，也便于自己记录！！！
如有疑问可以下方评论留言哦~会积极回复大家的！！！