uni-app subNVue 原生子窗体简单使用案例（app提交按钮）

因为原生的地图map、video等层级较高，其他的组件无法正常显示，所以使用弹出层用到原生子窗体subNvue
效果如下:

image.png

image.png

用法：
1、在需要使用的页面（addSamplePage）下新建subNvue文件夹，然后在里面建立相应的文件nvue

image.png

2、在pages.json中定义，把样式什么的直接写在需要引用的页面中，例如写在index页面里

{
            "path": "pages/addSamplePage/addSamplePage",
            "style": {
                "navigationBarTitleText": "样品检测新增页",
                "app-plus": {
                    "subNVues": [
                        {
                            "id": "video_mask",
                            "path": "pages/addSamplePage/subnvue/top",
                            "style": {
                                "position": "absolute",
                                "bottom": "0",
                                "left": "0",
                                "width": "100%",
                                "height": "90px",
                                "background": "transparent"
                            }
                        }
                    ]
                }

            }
        }

3.top.nvue页面

<template>
    <div class="wrapper">
        <div class="list">
            <text class="text" @click="submit('0')">保存</text>
            <text class="text" @click="submit('1')">提交</text>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            
            }
        },
        created() {

        },
        beforeDestroy() {
        },
        methods: {
            submit(e) {
                uni.$emit('drawer-page', e);
            },

        }
    }
</script>

<style>
    .wrapper {
        position: relative;
        flex: 1;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-color: #eee;
        border-style: solid;
        border-width: 4px;

    }


    .list {
        position: absolute;
        width: 640rpx;
        height: 90px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

    }

    .text {
        height: 50px;
        color: #fff;
        background-color: #192c7c;
        width: 275rpx;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        font-size: 30upx;
    }
</style>

4.在addSamplePage.vue页面中使用方法

<script>
    export default {
        data() {
            return {};
        },

        onLoad() {
            // #ifdef APP-PLUS
            this.playVideo()
            uni.$on('drawer-page', (data) => {
                uni.showToast({
                    title: '点击了第' + data + '项',
                    icon: "none"
                });
            })
            // #endif
        },
        onUnload() {
            uni.$off('drawer-page')
        },
        methods: {
            playVideo() {
                let subNVue = uni.getSubNVueById('video_mask')
                subNVue.show()
            }
        }
    }
</script>

需要注意的是nvue文件中很多css都不支持，文字必须写在text内