小程序禁止滚动穿透,page-meta

使用场景:页面中有弹窗,并且弹窗里数据超过弹窗的高,要在弹窗做滑动操作,当弹窗滑动到底部的时候,继续划动会导致底层页面的滚动,这就是滚动穿透。这种情况对于体验感很不友好。

解决办法:使用page-meta。截下官方的图

html 复制代码
<template>
	<page-meta :page-style="'overflow:'+(maskShows?'hidden':'visible')"></page-meta>
	<view>
		。。。
	</view>
</template>

如果把page-meta放在view里的话,会提示一个错误

必须放在整个页面的template下面才行。maskShows是弹窗是否显示的字段,这样的话弹窗的滑动就不会影响到主页面了。

相关推荐
内存不泄露1 小时前
二手物品交易平台
spring boot·小程序·django
酒醉的胡铁2 小时前
uniapp运行到鸿蒙证书配置
服务器·uni-app·harmonyos
华玥作者3 小时前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
狼性书生3 小时前
uniapp+vue3实现的简单吐司通知弹窗组件
前端·uni-app·vue·组件·插件
说私域4 小时前
基于AI智能名片链动2+1模式预约服务商城小程序的数据管理与系统集成研究
大数据·人工智能·小程序
Front思5 小时前
uniapp解决点击穿透问题总结
uni-app
说私域5 小时前
用户感知断裂与商业模式颠覆:AI智能名片链动2+1模式S2B2C商城小程序的破局之道
大数据·人工智能·小程序
peachSoda76 小时前
uniapp开发小程序 使用scroll-view时左右滑动切换无法回到最左边的bug解决方案
小程序·uni-app
ChinaLzw6 小时前
解决uniapp web-view 跳转到mui开发的h5项目 返回被拦截报错的问题
前端·javascript·uni-app
游戏开发爱好者86 小时前
如何在 Windows 环境下测试 iOS App,实时日志,CPU监控
android·ios·小程序·https·uni-app·iphone·webview