描述:uniapp内置的unipopup无法遮盖原生的navbar,原生tabbar

解决:使用subNvue配合uni-pop解决:

pages.json:配置

				"app-plus": {
					"scrollIndicator":"none",
					"bounce": "none",
					"safearea": {  
					    "bottom": {  
					        "offset": "none"  
					    }  
					},
					"subNVues":[
					    {
						"id":"fullpopup",
						"path":"pages/components/full-popup/full-popup",
						"type":"popup",  //设置类型是弹窗
						"style":{
							"position": "popup",   //定位是弹窗
							"background":"rgba(0,0,0,0.1)"  //设置背景色
						}
						
					}]
				}

弹窗触发入口:

使用如下代码,弹窗subNvue

const subNVue = uni.getSubNVueById('popupMq')  
                // 打开 nvue 子窗体  
                subNVue.show('fade-in', 300, function(){  
                    // 打开后进行一些操作...  
                    //   
                });  

如果要通信数据

设置一下:

uni.$emit('openFullPop',param);

 关闭使用如下代码:

            const subNVue = uni.getSubNVueById('popupMq')   
                // 关闭 nvue 子窗体  
                subNVue.hide('fade-out', 300)

subNvue下的代码:

<chat-popup ref="fullPop" type="center" backgroundColor="transparent" maskBg="rgba(0, 0, 0,0.1)" :isMaskClick="false"  @maskClick="closeParentPop">
			
</chat-popup>

 只需要在需要弹窗的地方使用:

const subNVue = uni.getSubNVueById('popupMq')  
                // 打开 nvue 子窗体  
                subNVue.show('fade-in', 300, function(){  
                    // 打开后进行一些操作...  
                    //   
                });  

如果遇到 第二次show(),subNvue不正常的情况,请更换hide代码;

比如:uni.reLaunch后,第二次show();出现不能使用。

//不能使用 uni.getSubNVueById('popupMq')
				//会导致reLaunch后   页面无法渲染
				//请使用 getCurrentSubNVue()
				const subNVue = uni.getCurrentSubNVue();   
				// 关闭 nvue 子窗体  
				subNVue.hide()

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐