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

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

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

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

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

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

相关推荐
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^4 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
thigh_d16 小时前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
珎珎啊16 小时前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
前端无涯16 小时前
uniapp跨平台开发---switchTab:fail page `/undefined` is not found
uni-app
老李不敲代码16 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa17 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
七七小报17 小时前
uniapp-商城-34-shop 购物车 选好了 进行订单确认
uni-app
二J18 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896320 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序