小程序禁止滚动穿透,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 小时前
微爱帮监狱寄信写信小程序工单系统技术方案:智能投诉处理与问题解决平台
人工智能·网络协议·安全·小程序·内容审核·监狱寄信
GRsln1 小时前
解决微信小程序报“errno“:600001 ERR_CERT_AUTHORITY_INVALID问题
nginx·微信小程序·小程序·ssl
阿奇__1 小时前
配置扫普通二维码进入微信小程序体验版踩坑
微信小程序·小程序
毕设源码-邱学长1 小时前
【开题答辩全过程】以 基于微信小程序的知识问答服务系统为例,包含答辩的问题和答案
微信小程序·小程序
微爱帮监所写信寄信1 小时前
微爱帮监狱写信寄信小程序智慧天气关怀系统技术方案
网络协议·小程序·https·监狱寄信·微爱帮
Hzsilvana2 小时前
在 uni-app 中检测 APP 端是否有通知权限
uni-app
咸虾米_2 小时前
uniapp使用history路由模式打包上线到前端网页托管的注意事项
前端·uni-app·vue3·unicloud·前端网页托管
2501_915921432 小时前
iPhone HTTPS 抓包在真机环境下面临的常见问题
android·ios·小程序·https·uni-app·iphone·webview
未寒2 小时前
关于uni app vue2 和vue3 的区别
前端·javascript·vue.js·uni-app
BBbila2 小时前
百度/微信小程序-跨端开发-兼容性避坑指南
微信小程序·小程序