问题汇总

目录

1.禁止滚动穿透

禁止滚动穿透

使用 wu-popup 等弹出层组件时，会发现遮罩下方的内容可以滚动，这就是穿透滚动。

但由于平台自身原因，除了h5平台外，其他平台都不能在在组件内禁止滚动穿透，所以在微信小程序、App 平台，页面内需要用户特殊处理一下

微信小程序/App

在 微信小程序/App 平台可使用 page-meta 组件动态修改页面样式，

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

在 wu-popup 的 change 事件中可以接受到 wu-popup 的开启关闭状态，并赋值 data 中的变量。

vue

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

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

Tips

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