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,会改写,然后再将代码贴上

链接:https://www.jianshu.com/p/017ab3d343ab


发表评论

电子邮件地址不会被公开。 必填项已用*标注