在使用uniapp开发app的过程中,遇到了项目中map地图层级过高问题经过思考后决定使用 subNVue 原生子窗体来解决问题
使用方法
第一步:
在对应要使用的文件下创建nvue页面,这个就是你的子窗体,里边的内容可以自由编辑(nvue这里就不多说了,跟vue有点区别,不会的可以看看文档)
第二步:
找到pages.json文件在你要用到的页面中定义子窗体,这里我是使用了两个
"app-plus": {
"subNVues":[{
"id": "nav", // 唯一标识
"path": "pages/newHouse/navigator", // 页面路径
/*"type": "popup", 这里不需要*/
"style": {
"position": "absolute",
"dock": "right",
"width": "750rpx",
"height": "150rpx",
"background": "transparent"
}
}]
}
第三步:
在你要用到的文件里控制显示和隐藏子窗体
shownav(){
const subNVue = uni.getSubNVueById('nav');
subNVue.show('fade-in', 200, () => {
console.log('subNVue 原生子窗体显示成功');
})
uni.$emit('nav',this.dataList.Cantavil)
subNVue.setStyle({
"position": "absolute", //除 popup 外,其他值域参考 5+ webview position 文档
"top": "-1",
"background": "transparent"
});
},
closenav(){
this.showNav = 0;
const subNVue = uni.getSubNVueById('nav');
subNVue.hide('fade-out',200,() => {
console.log('subNVue 原生子窗体隐藏成功');
});
},
传递参数
可以使用uniapp中的全局的自定义事件
//事件发射
uni.$emit('update',{msg:'页面更新'})
//事件监听
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
地址 https://uniapp.dcloud.io/api/window/communication.html#emit
完事,根据你的逻辑就可以控制他什么时候显示和隐藏了,真机调试记得重启一遍,要不然会报错