uni-app 在APP端如何覆盖原生导航栏

uni-app 在APP端如何覆盖原生导航栏，这个估计是做的最好就是弹窗吧，但是uni-app有个弊端，就是原生组件的导航栏官方并没有提供方法覆盖，所以之前导致很多人做弹窗很麻烦，有些人还不愿意做弹窗。

其实有这种APP全覆盖弹窗很简单，先看看原理

A页相等于首页，B页就是半透明跳转显示的，这样就是覆盖了，这样的逻辑应该很好理解吧，好了，先贴代码吧

但是返回传参的话可以使用 uni.setStorageSync 方法存储，退出B页的时候，触发一下A页的方法即可

注意：这个方法只适合APP

pages.json配置

{
    "path": "pages/B页/B页",
    "style": {
        //取消原生导航栏
        "navigationStyle": "custom",
        "backgroundColor": "transparent",
        "app-plus": {
            "animationType": "fade-in",
            "background": "transparent",
            "popGesture": "none"
        }
    }
}

A页

<template>
    <view class="content">
        <button @click="showPopup" type="primary">show popup</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            showPopup() {
                //进入B页
                // #ifdef APP-PLUS
                uni.navigateTo({
                    url: 'pages/B页/B页'
                })
                // #endif
                // #ifndef APP-PLUS
                uni.showModal({
                    title: '仅支持App端'
                })
                // #endif
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

B页

<template>
    <view @click="close" class="mask">
        <view @click.stop="onClick" class="content">
            <text class="text">点击蒙层关闭</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            onClick(e) {
                uni.showToast({
                    title: "点击蒙层关闭"
                })
                // #ifdef APP-NVUE
                e.stopPropagation()
                // #endif
            },
            //关闭退出B页
            close() {
                uni.navigateBack()
            }
        }
    }
</script>

<style>
    page {
        background: transparent;
    }

    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .content {
        width: 200px;
        height: 200px;
        background-color: #007AFF;
    }

    .text {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        line-height: 200px;
        text-align: center;
        color: #FFFFFF;
    }
</style>