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

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

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

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

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

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

相关推荐
getyefang3 小时前
uniapp如何接入星火大模型
ai·uni-app
@PHARAOH3 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_15 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙7 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_797882097 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
goto_w8 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白8 小时前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
暮雨哀尘9 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理10 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
Json____20 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位