uni-app 自定义弹框，滑动界面事件冲突

分类：uni-app

uni-app 自定义模态层弹框，在弹框中上下滑动，灰色模态层后的界面也在滑动，导致弹框中的界面滑动与body滑动冲突，本想滑动弹框中的界面却滑动了模态层后的界面。

2018-10-26 10:23 负责人:无分享

5 个回复

最佳回复

如果想阻止弹出层的滚动，可以在遮罩层监听touchmove事件同时阻止事件冒泡和默认行为： <view class="mask" @touchmove.stop.prevent="moveHandle"></view>

x***@126.com - web前端开发 Q：282310962

可以通过touch-action:none来实现的。
uni-app自定义modal弹窗组件|仿微信弹窗效果
https://www.cnblogs.com/xiaoyan2017/p/11589149.html

请问有解决方案吗

用@touchmove.stop.prevent="moveHandle"这个确实有用，但这个弹框的内容划到低的时候还是会带动下面的灰色模态层跟着滑动，这个有好的解决方案吗？

simpleLove

同问

2020-05-27 16:17
Shenalone

回复 simpleLove: 我看了下，一些大型的像淘宝京东就没有这种问题，但是一些小一点的商城app还是会有这种问题存在，这个没有好的办法解决吗……

2020-05-29 14:43
w***@163.com

回复 Shenalone: mask加@touchmove.stop.prevent 只能阻止你滑动mask;你需要给你的modal层的大容器再加一个 @touchmove.stop.prevent=“” ；才会阻止；然后大容器内再放一个正常的 scroll-view;就好了

2020-09-01 10:13