问题描述
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 方法一致
