uniapp 关于弹出层遮盖原生tabbar,navbar
描述:uniapp内置的unipopup无法遮盖原生的navbar,原生tabbar解决:使用subNvue配合uni-pop解决:pages.json:配置"app-plus": {"scrollIndicator":"none","bounce": "none","safearea": {"bottom": {"offset": "none"}},
描述: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()
更多推荐
所有评论(0)