uniapp 禁止穿透滚动 遮罩弹窗背景滚动问题

uniapp yekong 43℃

问题描述

uniapp 微信小程序开发时,经常会遇到弹出层弹出后,即便有背景遮罩,滑动页面背景也跟随滚动,也就是滚动穿透,这并不是我们想要看到的效果。

解决方案

uniapp 在 微信小程序/App 端可使用 page-meta 组件动态修改页面样式,来控制穿透滚动问题。

关键代码

<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

完整代码

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="homepage">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		},
		onLoad() {
		},
		methods: {

		}
	}
</script>

注意

h5 滚动穿透不需要处理
wx、app 需要 使用 page-meta 组件配合阻止滚动穿透
page-meta 组件,一个页面只能存在一个
其他平台无法阻止滚动穿透,建议使用 scroll-view 滚动 ,手动设置 overflow:hidden,同 page-meta 方法一致

uniapp文档说明

uniapp文档说明

喜欢 (0)