解决支付宝小程序uview组件u-popup遮罩滚动穿透问题

捧杀偶像裹腹

已于 2023-04-19 16:15:36 修改

阅读量5.4k

点赞数 5

CC 4.0 BY-SA版权

文章标签：小程序前端 vue.js

于 2023-04-19 16:13:18 首次发布

本文链接：https://blog.csdn.net/StayInCat/article/details/130244365

文章讲述了在uni-app开发中遇到u-popup弹出层开启时页面跟随滚动的问题。作者尝试了阻止事件冒泡和使用scroll-view的方法，但分别遇到了逻辑复杂和用户体验不佳的问题。最后，通过CSS的touch-action和overscroll-behavior属性成功解决了问题，阻止了遮罩层的触摸动作并限制了内容区域的滚动溢出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发平台：uni-app

问题描述：

当u-popup弹出层打开时，滑动遮罩区域，弹出层后面的页面也跟着滚动

尝试的解决方案：

根据问题表现，猜测可能是事件冒泡导致的，那是不是可以写一些阻止事件冒泡的代码。但是想到当前的开发不是原生的小程序代码，而是由uniapp编译的，语法是vue的，并不能确保uniapp能够正常编译或支持阻止事件冒泡的代码操作，并且将这个代码应用到现有的组件上并不容易。所以放弃了这个方案。

接下来看到了另一个方案，在页面内容的最外层元素上使用scroll-view容器替代view，然后通过控制scroll-y的值来锁定页面滚动，只需在弹出层打开时将scroll-y的值设置为true，然后关闭时设置为false就可以了。听起来这是个不错的方案，但实际应用下来发现了一些问题：

1、首先是增加了逻辑，而在实际开发中常常忘了在某些业务逻辑中更新scroll-y的值，导致页面无法滚动的bug

2、其次在用户交互体验上也存在问题，使用了scroll-view容器，在页面弹动时容易造成页面无法滚动，交互体验很差

最终的解决方案：

最终尝试用css解决这个问题，我们将用到两个css属性：

1、首先我们需要在弹出层的遮罩元素上加上此样式来取消区域触摸动作

touch-action - CSS：层叠样式表 | MDN

{
    touch-action: none;
}

好消息是u-popup提供了遮罩自定义样式属性，我们只需要给这个属性添加此自定义样式：

<u-popup :overlayStyle="{'touch-action':'none'}">
...
</u-popup>

2、然后我们需要给滚动内容区域增加这些样式让其可以滚动，并阻止其滚动溢出

overscroll-behavior - CSS：层叠样式表 | MDN

{
    height: 500rpx; // 固定高度
    overflow-y: scroll; // 超出滚动
    overscroll-behavior: none; // 禁止滚动溢出
}