Uni-popup在微信小程序中禁止滚动穿透

问题描述

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

解决方法

需要在 data 中定义一个变量，用来表示 uni-popup 的开启关闭状态，并通过这个变量修改 page-meta 的 overflow 属性。

在 uni-popup 的 @change 事件中可以接受到 uni-popup 的开启关闭状态 ，并赋值给上面的变量.

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="container">
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
		<!-- ... -->
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false
			}
		},
		methods: {
			change(e) {
				this.show = e.show
			}
		}
	}
</script>

来源

Uni-app禁止滚动穿透