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

原理:

 

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

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

解决:

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

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

代码:

uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app/h5适用_第1张图片

tips:

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

补充:

uniapp

如果编译为 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);
                }
            },

你可能感兴趣的:(小程序,小程序,微信小程序)