uni-app subNVues的使用

在首页要弹出一个弹框，弹出的弹框无法遮住顶部导航栏和底部tabbar，uni-app官方给出了两种解决方法，plus.nativeObj.view或subNVue，nativeObj我看了一下文档，觉得好复杂，所以我选择了subNVue的方法
直接将代码贴上

在pages.json中的配置

{
           "path": "pages/home/home",
           "style": {
               "navigationBarTitleText": "首页",
               "app-plus": {
                   "scrollIndicator": "none",
                   "bounce": "none",
                   "subNVues": [{
                       "id": "tanchu", // 唯一标识 
                       "path": "pages/home/tanchu", // 页面路径  
                       "type": "popup",  //这里不需要
                       "style": {
                           "position":"absolute",
                           "margin": "auto",
                           "width": "100%",//这里的宽高都设置成100%，才能挡住整个页面，虽然底部的tabbar不能遮挡住，但是点击页面不会有反应
                           "height": "100%",
                           "background": "transparent"
                       }
                   }]

               }
           }
       },

在需要弹出子窗体的页面，我这里是home页面，使用下面代码弹出弹框

const subNVue = uni.getSubNVueById('tanchu'); // 通过 id 获取 nvue 子窗体 
subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体

subNVue子窗体的写法和平常的页面一样，但是有一些小的不同之处
1、css的要求必须很严格，比如设置背景颜色必须使用background-color
2、在子窗体里无法设置背景图片，设置不会生效，我是直接用<image>引入图片来实现
3、在子窗体中可以直接使用subNVue.hide()来关闭弹出层

子窗体和父窗体中数据通讯

//子窗体监听数据
uni.$on('page-popup', (data) => {  
    vm.title = data.title;  
    vm.content = data.content;  
})  

// 父窗体传递数据
uni.$emit('page-popup', {  
    title: '我是一个title',  
    content: '我试data content'  
});

感觉自己用这个subNVue写的并不够好，底部的tabbar没有蒙层，后面要是学会nativeObj，会改写，然后再将代码贴上