代碼記錄

<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 組件來動(dòng)態(tài)修改頁面的 overflow 屬性，通過綁定 show變量的值來控制頁面的滾動(dòng)。通過uni-popup 里的@change事件，當(dāng) show為true 時(shí)，底層頁面的滑動(dòng)被禁止，這樣就解決了彈窗滑動(dòng)穿透問題。