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

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

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

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

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

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

相关推荐
Nueuis1 小时前
微信小程序前端面经
前端·微信小程序·小程序
轩1157 小时前
实现仿中国婚博会微信小程序
微信小程序·小程序
八月林城10 小时前
echarts在uniapp中使用安卓真机运行时无法显示的问题
android·uni-app·echarts
哈贝#10 小时前
vue和uniapp聊天页面右侧滚动条自动到底部
javascript·vue.js·uni-app
iOS阿玮12 小时前
苹果2024透明报告看似更加严格的背后是利好!
uni-app·app·apple
2501_9189410514 小时前
旅游微信小程序制作指南
微信小程序·小程序·旅游
全职计算机毕业设计15 小时前
SpringBoot+Mysql实现的停车场收费小程序系统+文档
spring boot·mysql·小程序
邹荣乐15 小时前
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合
前端·微信小程序·uni-app
不吃糖葫芦316 小时前
App使用webview套壳引入h5(三)——解决打包为app后在安卓机可物理返回但是在苹果手机无法测滑返回的问题
uni-app·webview
半兽先生19 小时前
uniapp微信小程序视频实时流+pc端预览方案
微信小程序·uni-app·音视频