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

原理:

 

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

但由于平台自身原因，除了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);
                }
            },