uniapp-Vue3中u-popup滑动页面穿透问题

在我们用uniapp写小程序或者APP的时候,有时候会用到一些弹出框组件

例如:image-20230813224326721

但在弹出框内部滑动会引起整个页面的滑动,让整个页面看起来不是和很好

解决方案

  1. 弹框最外层使用@touchmove.stop.prevent="preventHandler" 屏蔽触摸事件,屏蔽后如果弹框内还有列表,则列表此时无法滚动。

image-20230813224447216

在下方定义事件

image-20230813224529567

  1. 但是里边如果还是需要滑动的话,比如我这里吧需要有一个表情的列表,则可以使用 scroll-view,并设置scroll-y=“true”,scroll-view 不会受到@touchmove.stop.prevent=“preventHandler” 的影响。

image-20230813224742879

这样整个问题就完美解决了

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐