uni-app实现弹出框组件禁止滚动穿透

在uni-app开发中，经常会使用弹出框、遮罩层以及日期选择器等组件，但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这可能会影响用户体验。为了解决这个问题，我们可以采用以下方法。

滚动穿透是什么？

滚动穿透问题通常在使用弹出层、遮罩层或日期选择器等组件时出现。用户在组件内滚动内容时，当内容滚动到底部后，继续滑动可能导致底层页面也滚动，这不符合用户的期望。以下是两种解决方法。

解决方案

1. 禁止蒙版的滚动穿透

如果你想要禁止蒙版下的页面滚动，可以使用以下方法：

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

在上述代码中，我们使用了 page-meta 组件来动态修改页面的 overflow 属性，通过绑定 show10 变量的值来控制页面的滚动。当 show10 为 true 时，底层页面的滚动被禁止，从而解决了滚动穿透问题。

2. 禁止Popup内容区域的滚动穿透

注意：在h5平台可以通过动态修改body标签的样式，设置 overflow:hidden 即可解决滚动穿透，无循进行本章节的配置

a) 使用 page-meta 组件动态修改 page-meta 的 overflow 属性

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

这个方法与上述禁止蒙版滚动穿透的方法类似，但它专门用于禁止Popup内容区域的滚动穿透。

b) 将页面包裹在 <scroll-view> 标签中，并设置高度为100vh

<scroll-view style="height: 100vh;">  
  <!-- 页面内容 -->  
</scroll-view>

通过将页面内容包裹在 <scroll-view> 标签中，并设置高度为100vh（即视口的高度），可以有效地防止Popup内容区域的滚动穿透。这种方法不需要额外的组件配置，非常简单。

关于 page-meta

page-meta 是一个用于指定页面属性和监听页面事件的组件，它可以部分替代 pages.json 的功能。它的引入使得在vue文件中配置页面属性成为可能，从而实现更灵活的页面管理。

尽管 page-meta 具有一定的替代作用，但在性能方面不如 pages.json 的配置。在新页面加载时，使用 pages.json 的方式更为高效。

综上所述，通过合理使用上述方法，你可以轻松解决uni-app中的滚动穿透问题，提升用户体验

完整实现

可以参考 wot-design-uni 组件库的 popup 组件的实现。
Github
文档网站
插件市场
QQ群