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

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

滚动穿透是什么?

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

解决方案

1. 禁止蒙版的滚动穿透

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

html 复制代码
<!-- 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 变量的值来控制页面的滚动。当 show10true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。

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

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

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

html 复制代码
<!-- 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) 将页面包裹在 标签中,并设置高度为100vh

html 复制代码
<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群

相关推荐
回忆哆啦没有A梦3 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__3 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园4 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8285 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊5 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿8 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊8 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅9 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防9 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html