uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app/h5适用

Posted 2023-04-02 前端小胡兔

原理:

 

遮罩打开,内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

但由于平台自身原因，除了h5平台外 ，其他平台都不能在在组件内禁止滚动穿透，所以在微信小程序、App 平台，页面内需要用户特殊处理一下

解决:

在 微信小程序/App 平台可使用 page-meta 组件动态修改页面样式 ，

需要在 data 中定义一个变量，用来表示 uni-popup (其他遮罩也可)的开启关闭状态，并通过这个变量修改 page-meta 的 overflow 属性。

代码:

<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

tips:

• h5 滚动穿透不需要处理
• wx、app 需要 使用 page-meta 组件配合阻止滚动穿透
• 注意 page-meta 组件，一个页面只能存在一个
• 其他平台无法阻止滚动穿透，建议使用 scroll-view 滚动 ，手动设置 overflow:hidden,同 page-meta 方法一致

补充:

uniapp

<page-meta :page-style="'overflow:'+(showOverlay?'hidden':'visible')"></page-meta>

如果编译为 h5 需要增加方法:

下面是开启遮罩后禁止滚动

openOverlay()
                this.showOverlay = true;
                let uniPlatform = uni.getSystemInfoSync().uniPlatform;
                // H5禁止滚动
                if (uniPlatform == 'web')
                    var mo = function(e)
                        e.preventDefault();
                    ;

                    document.body.style.overflow = 'hidden';
                    document.addEventListener("touchmove", mo, false); //禁止页面滑动
                

            ,
            //关闭遮罩
            closeOverLay: function()
                this.showOverlay = false;
                let uniPlatform = uni.getSystemInfoSync().uniPlatform;
                if (uniPlatform == 'web')
                    var mo = function(e)
                        e.preventDefault();
                    ;
                    document.body.style.overflow = ''; //出现滚动条
                    document.removeEventListener("touchmove", mo, false);
                
            ,

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

小程序遮罩层遮住页面后滚动穿透问题分为两种情况：
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 ; 
  }

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