弹出层组件u-popup上的操作会在背景页面产生滚动跟随

[JuliusDeng]

版本

2.0.19

转载链接

www.uviewui.com

重现步骤

在一个滚动页面使用u-popup弹出层组件，在u-popup上面使用canvas标签进行签名操作，这是当手指进行上下滑动时，背景页面会跟着手指进行上下滑动，体验很差，无法上线产品功能。望优化，谢谢

期望的结果是什么？

u-popup上面使用canvas标签不影响背景页面（不跟随手指上下滑动）

实际的结果是什么？

在u-popup上面使用canvas标签进行签名操作，这是当手指进行上下滑动时，背景页面会跟着手指进行上下滑动

[weiguanglai]

方案1.页面中使用popup组件的时候，在pop组件里加一个跟元素，让它填充满整个页面。
方案2.还是加一个根元素，在根元素上加catchtap="selectCancle" catchtouchmove='true'

[weiguanglai]

我的场景是，弹出层有滚动条，滚动的时候背景页面也会跟随滚动，我用的方案1

[orangepro11]

已确认时popup的触摸穿透问题

[successColin]

在pop组件里加一个跟元素，堆满整个页面。样式：
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
还是无效，下面的列表还是可以穿透滚动

[songsongtao]

+1 ，modal、toast都使用了popup都有这个问题

[wuaidajiejie]

问题+1 modal也是一样

[ChenLiuPng]

不用popup上使用canvas，在最底层节点上使用canvas。

[pjqdyd]

我也是遇到这种问题，通过 https://blog.csdn.net/qq_35430000/article/details/120459368 这位博主的文章解决了，希望官方早点修复这个bug

[boluo600]

试了以上的办法都不成功。
我的场景是页面有列表滚动，popup里面也有滚动，通过uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）这篇文章解决了问题。希望官方早点修复bug

[hsjz2281]

在需要控制的页面的template标签下添加,,show是弹窗显示变量,添加后解决,编译器会报红,但不影响运行

[zch97]

最终通过uniapp官网提供的方法解决了该问题，希望能对其他遇到此问题的人有帮助：
https://zh.uniapp.dcloud.io/component/uniui/uni-popup.html#%E7%A6%81%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F

[white-0419]

看了uniapp官网文档，感觉uView有点冤，我觉得不算组件库的问题。
解决方案是只需要在滚动区域使用 scroll-view 即可，详细方法可以搜索关键字 uniapp 滚动穿透，或者直接查看这篇文章

[wlxweb]

修改 u-transition.vue 文件，
@touchmove="noop" 改为 @touchmove.stop.prevent="noop"

[ElksZero]

u-modal使用了u-popup，u-popup使用了u-trainsition包裹，u-trainsition调用了noop，阻止了touchmove事件冒泡但是并没有阻止touchmove的默认行为，而如果在一个没有明显滚动内容的容器中触发了 touchmove，浏览器可能会默认在父级页面上进行滚动。所以会出现打开了modal或者popup，滑动依然会导致被遮罩的“背景页面”滚动