uni-app 安卓下uni-popup组件滑动时蒙版下内容仍然跟随滑动
uni-app 安卓下uni-popup组件滑动时蒙版下内容仍然跟随滑动
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
bug描述：
uni-popup滑动弹窗内的内容，蒙版下的内容仍然滑动，此问题在h5里没有，app里会出现。
动态设置蒙版下的内容overflow:hidden无效
uni-popup外增加view @touchmove.stop.prevent ，虽不能滑动，但弹窗内也不能滑动。
这个解决方法是不是给蒙版设置@touchmove.stop.prevent 就行了，那怎么给蒙版设置touchmove呢
@touchmove.stop.prevent 直接加到 uni_modules/uni-popup/components/uni-popup/uni-popup.vue 组件的view 上，和你uni-popup外增加view @touchmove.stop.prevent 一样，蒙层下就不能滑动，，窗口内uni-popup 是fixed 定位的，也是不能滑动的，如果还有问题，可以上demo☺
多谢提醒，代码写的脑子给写傻了，忘了modules里是能改的。你说的这种和直接在popup外加个view一样，虽然遮罩层下的内容不能滑动，但弹窗里的内容也不能滑动。然而像我前面说的在popup遮罩层uni-transition上加touchmove并不行，然后顺腾摸瓜找到modules里的uni-transition，在view上加touchmove才完美解决，感觉这就是个bug啊，明明可以app不穿透滚动，然而uni-popup却没做。希望修复下。
现在如果觉得麻烦，可以试试另一种简单的方法，弹窗外加view 设置touchmove，在弹窗里加<scroll-view scroll-y="true">需要滚动的内容</scroll-view>，这种方法不用改modules，直接在页面里就能实现。
在 uni-app 中使用 uni-popup 组件时，如果遇到在安卓设备上滑动弹出层时，蒙版下的内容仍然跟随滑动的问题，通常是由于弹出层的遮罩层没有正确阻止底层内容的滚动。
要解决这个问题，可以尝试以下几种方法：
方法一：使用 mask 属性
uni-popup 组件提供了一个 mask 属性，用于控制是否显示遮罩层。确保 mask 属性设置为 true，这样遮罩层会阻止底层内容的滚动。
<uni-popup ref="popup" mask="true">
<!-- 弹出层内容 -->
</uni-popup>方法二：手动阻止底层滚动
如果 mask 属性无法完全解决问题，可以手动阻止底层内容的滚动。可以通过在弹出层显示时，给 body 或 html 元素添加 overflow: hidden 样式来阻止滚动。
methods: {
showPopup() {
this.$refs.popup.open();
document.body.style.overflow = 'hidden';
},
hidePopup() {
this.$refs.popup.close();
document.body.style.overflow = '';
}
}方法三：使用 scroll-view 包裹内容
如果弹出层内部有滚动内容，可以使用 scroll-view 组件来包裹内容，并设置 scroll-y 属性为 true，这样可以在弹出层内部实现滚动，而不会影响到底层内容。
<uni-popup ref="popup" mask="true">
<scroll-view scroll-y="true" style="height: 100%;">
<!-- 弹出层内容 -->
</scroll-view>
</uni-popup>方法四：使用 touchmove 事件阻止默认行为
在弹出层显示时，可以通过监听 touchmove 事件并阻止默认行为来防止底层内容滚动。
methods: {
showPopup() {
this.$refs.popup.open();
document.addEventListener('touchmove', this.preventScroll, { passive: false });
},
hidePopup() {
this.$refs.popup.close();
document.removeEventListener('touchmove', this.preventScroll);
},
preventScroll(event) {
event.preventDefault();
}
}方法五：使用 position: fixed 固定底层内容
在弹出层显示时，可以通过给底层内容添加 position: fixed 样式来固定其位置，从而防止滚动。
methods: {
showPopup() {
this.$refs.popup.open();
document.body.style.position = 'fixed';
document.body.style.width = '100%';
},
hidePopup() {
this.$refs.popup.close();
document.body.style.position = '';
document.body.style.width = '';
}
}