©2020-2024 ioDraw All rights reserved,
Privacy Policy
原理:
遮罩打开,内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
但由于平台自身原因，除了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);
}
},