使用uniapp写小程序uni-popup弹窗滑动穿透处理

代码记录

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

使用了 page-meta 组件来动态修改页面的 overflow 属性，通过绑定 show变量的值来控制页面的滚动。通过uni-popup 里的@change事件，当 show为true 时，底层页面的滑动被禁止，这样就解决了弹窗滑动穿透问题。