记一次subNVue 原生子窗体的使用

1. 在uniApp中App模式下使用【subNVue 原生子窗体】解决抽屉侧边栏无法覆盖map、canvas等原生组件的问题

首先创建抽屉页面drawer.nvue

页面代码如下:

<template>
    <div class="wrapper">
    <!--    <list class="list-wrapper">
            <cell v-for="item in lists" :key="item.id">
                <div class="text-wrapper" @click="clickitem(item.id)">
                    <text style="font-size: 30upx; ">{{item.name}}</text>
                    <text class="icon">&#xe583;</text>
                </div>
            </cell>
        </list> -->
        <div style="flex: 1; text-align: center;">
            <div class="close-drawer" @click="toMineInfo">
                <text style="font-size: 34upx; text-align: center;">个人信息</text>
            </div>
        </div>
        <div style="flex: 1; text-align: center;">
            <div class="close-drawer" @click="hideDrawer">
                <text style="font-size: 34upx; text-align: center;">关闭抽屉</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                lists: [],
            }
        },
        beforeCreate() {
            const domModule = weex.requireModule('dom')
            domModule.addRule('fontFace', {
                fontFamily: "unibtn",
                'src': "url('../../../../static/uni.ttf')"
            });
        },
        created() {
            for(let i = 0; i < 5; i++){
                this.lists.push({
                    id: i,
                    name: 'Item' + i,
                });
            }
        },
        methods: {
            toMineInfo(){
                uni.navigateTo({
                    url:'/pages/mine/mineInfo/mineInfo'
                })
            },
            hideDrawer() {
                uni.getCurrentSubNVue().hide('auto')
            },
            clickitem(e) {
                uni.$emit('drawer-page', e);
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        flex-direction: column;
        flex: 1;
        text-align: center;
        padding: 60upx 0upx 0upx 20upx;
        background-color: #2293f7;
    }
    .nav-text {
        color: #8f8f94; 
        /* #ifndef APP-PLUS-NVUE */
        margin-bottom: 40px;
        /* #endif */
        /* #ifdef APP-PLUS-NVUE */
        margin-bottom: 40upx;
        /* #endif */
    }
    .list-wrapper {
        /* #ifdef APP-PLUS-NVUE */
        height: 450upx;
        /* #endif */
        /* #ifndef APP-PLUS-NVUE */
        height: 450px;
        /* #endif */
    }
    .text-wrapper {
        justify-content: center;
        border-bottom-style: solid;
        border-bottom-width: 1upx;
        border-bottom-color: rgba(0,0,0,.2);
        margin-bottom: 35upx;
        padding-bottom: 15upx;
    }
    .close-drawer {
        background-color: #f8f8f8;
        width: 300upx;
        padding: 15upx;
        border-radius: 20upx;
        border-style: solid;
        border-width: 1upx;
        border-color: rgba(0,0,0,.2);
    }
    .icon {
        position: absolute;
        right: 10upx;
        color: #000000;
        font-family: unibtn;
        font-size: 30upx;
        font-weight: 400;
    }
</style>

在pages.json中的配置如下:

"subPackages": [{
        "root": "pages/index",
        "pages": [ 
            { 
                "path": "index",
                "style": {
                    "navigationBarTitleText": "SubNvue",
                    "app-plus": {
                        "titleNView": false,
                        "subNVues": [{
                            "id": "drawer",
                            "path": "subnvue/drawer",
                            "type": "popup",
                            "style": {
                                "width": "70%",
                                "right":"0"
                                // "left":"20%"
                            }
                        }]
                    }
                }
            }
        ]
    }
]
    

2. 使用【subNVue 原生子窗体】创建一个公共的导航栏

首先创建公共导航栏页面nav.nvue

页面代码如下:

<template>
    <div class="wrapper">
        <div class="status-bar"></div>
        <div class="nav">
            <text class="back" @click="back">&#xe582;</text>
            <text class="title">{{title}}</text>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title:''
            }
        },
        beforeCreate() {
            const domModule = weex.requireModule('dom')
            domModule.addRule('fontFace', {
                fontFamily: "unibtn",
                'src': "url('../../../../static/uni.ttf')"
            });
        },
        created() {
            let that = this;
            uni.$on('setTitle', (title) => {  
                that.title = title;
            }) 
        },
        methods: {
            back() {
                uni.navigateBack();
            }
        },
    }
</script>

<style>
    .wrapper {
        flex: 1;
        /* background-image: linear-gradient(to right, #a80077, #66ff00); */
        background-image: linear-gradient(to right, #2293f7, #2293f7);
        flex-direction: column;
    }
    .status-bar {
        flex: 1;
    }
    .nav {
        position: relative;
        height: 44px;
        flex: 0;
        justify-content: center;
        align-items: center;
    }
    .title {
            font-size: 36upx;
    }
    .back {
        position: absolute;
        left: 3px;
        color: #000000;
        font-family: unibtn;
        font-size: 54upx;
    }
</style>

在pages.json中的配置如下:

{
    "path" : "pages/mine/mineInfo/mineInfo",
    "style" : {
        "navigationStyle":"custom",
        "app-plus":{
            "subNVues":[{
                "id":"nav",
                "path":"paltform/app-plus/subNVue/nav/nav",
                "type":"navigationBar"
                
            }]
        }
    }
}