uniapp中subNvue的使用

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体。

          

大概就是实现一个这样的功能 再一个视频组件上面显示一段文字

这个再微信小程序上可以使用  css样式中的 定位加堆叠实现  z-index   谷歌模拟的h5端也可以 但在真实的手机上这种方式不起作用

uniapp 官方给我们推荐了一种解决方法  使用subNvue，就可以实现了

1.现在要实现的页面文件下建立  subNVue文件夹  下面建立一个hello.nvue文件

hello.nvue里面的代码

<template>
    <div>
        <text class="hello">hello uni-app</text>
    </div>
</template>

<script>
</script>

<style>
    .hello{font-size: 30px;color:red;}
</style>

2.在pages.json文件中配置

{
            "path": "pages/index/index",
            "style": {
                "app-plus": {  
                    "titleNView": false,  //不启用系统导航
                    "subNVues":[{  
                        "id": "popup", // 唯一标识  
                        "path": "pages/index/subNVue/hello", // 页面路径  
                        //"type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
                        "style": {  
                            "position":"absolute",
                            "dock":"left",
                            "height": "60upx",
                            "top":"40px",
                            "background":"transparent"
                        }  
                    }]  
                } 
            }
        }

3.然后在页面上实现

methods:{
            click(){
                const subNvue=uni.getSubNVueById('popup');   //获取 
                subNvue.show()  // 显示
            },
            tab(){
                const subNvue=uni.getSubNVueById('popup');
                subNvue.hide()  // 隐藏
            }
        },
        onLoad() {   // 第一次加载他可能会默认显示 所以我们首先先 隐藏了
            const subNvue=uni.getSubNVueById('popup');
            subNvue.hide();
        }

4.最后就实现了  页面上就可以了