关于 uniapp 组件 uni-popup 遮罩层触摸滚动穿透的解决办法

2,891 阅读1分钟

问题描述: 在使用 uniapp 开发微信小程序的过程中,ui 组件是使用的 uni-ui。 发现使用 uni-popup 写的组件存在遮罩层滚动穿透的情况,试了几种网上“热门”的方法都没起作用,这里简单说下我自己的处理方案。

解决过程: 1、在 uni_modules 文件夹中找到 uni-popup 组件,发现这里的遮罩层是使用的 uni-transition 组件来实现的。

图片.png

2、然后顺藤摸瓜来到 uni-transition 组件中,直接给 view 来一个 catchtouchmove="prevent"
   注意:prevent 可以是任意为 true 的表达式或值,也就是说直接绑定一个 true 也是可以的。

图片.png

3、来到自己的组件/弹出框列表中,使用 scroll-view 组件来包裹列表,并给 scroll-view 固定高度和设置 绝对定位,给 scroll-view 的父级盒子设置相对定位。

图片.png

4、搞定下班!