uniapp微信小程序解决弹框组件滚动穿透

一般在写一些组件如弹框，遮罩时，需要弹框能滚动，但是页面不能滚动，之前我是在弹框的根元素上加入@touchmove.stop.prevent，然后如果弹框要滚动的话就使用scroll-view来实现弹框内部滚动页面不滚动，但是后面发现了一个问题，如果弹框里面有textarea，textarea是滚动不了的，然后我就想到了另外一种办法来解决这个问题：

可以在页面使用page-meta组件来动态控制页面是否可以滚动，需要控制滚动的页面中第一个节点加入page-meta组件，切记必须在第一个节点且不能用v-if来控制

<template>
	<page-meta :page-style="`overflow:${pageScrollFlag?'visible':'hidden'}`"></page-meta>
	<view class="container"></view>
</template>

data中别忘了加入变量

data() {
	return {
		pageScrollFlag: true,
	};
}

然后在弹框组件打开时控制pageScrollFlag为false，此时页面就不会滚动了，关闭弹框时记得把页面设置回true。

最好设置pageScrollFlag的这个逻辑写在弹框内部，我在实际项目中是这样写的：
(以下代码均写在弹框内部组件中)

/**
 * @param { Object } _this 当前组件实例或父组件实例  
 * @param { Boolean } status 控制页面是否能滚动
 * @description 如果要控制页面是否能滚动 那么该页面必须添加page-meta标签 且实例中必须有pageScrollFlag属性 属性的值为布尔值
 **/
handleParentScroll(_this, status) {
	if (_this.$parent) {
		if (_this.$parent.pageScrollFlag !== undefined) {
			_this.$parent.pageScrollFlag = status
		} else {
			this.handleParentScroll(_this.$parent, status)
		}
	}
}

每次弹框打开时调用：this.handleParentScroll(this, false)
关闭时调用：this.handleParentScroll(this, true)

这里我用了递归，这样写的话，弹框的所有的父组件，不管嵌套多少层，只要实例有pageScrollFlag属性，弹框就会根据打开或者关闭动态修改pageScrollFlag的值，但是记得页面必须要使用page-meta组件，这样即可解决滚动穿透问题，而且总的来说也不算麻烦。