【问题解决】uniapp-Vue3中u-popup滑动页面穿透问题

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

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