uni-app APP端自定义popup，覆盖原生组件的弹窗

uni-app的弹窗，如果不用原生的，直接用css控制，是无法覆盖tabbar和原生头部等原生组件的。这里的方法是将popup作为一个页面来弹出，页面是可以覆盖原生组件的，将这个页面的背景设置为透明就能模拟出弹窗的效果。

1、定义一个popup页面，样式如下：

<template>
    <view class="bg-color">
        <！--这里放弹窗的具体内容-->
        <view class="p4" @click="closePopup">关闭弹窗</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            closePopup(){
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>

<style>
page {
    background: transparent;
}
.bg-color{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.3);
}
</style>

2、在pages.json中将popup定义为页面

"pages": [
    {
        "path": "pages/popup/popup",
        "style": {
            "navigationStyle": "custom",
            "backgroundColor": "transparent",
            "app-plus": {
                "animationType": "fade-in",
                "background": "transparent",
                "popGesture": "none"
            }
        }
    }
]

3、使用方法：

showPopup(){
    uni.navigateTo({
        url: '/pages/popup/popup',
        // 可以配合页面打开动画，让弹窗出现的更加个性
        // animationType: 'slide-in-bottom',
        // animationDuration: 150
    });
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！