uniapp全屏弹窗，覆盖原生控件导航栏和tabbar，全局调用
在uniapp中popup弹窗及对话框的遮罩层是覆盖不了原生的导航栏和tab栏的，在tabbar页中使用弹出框会非常的违和，接下来告诉大家实现的思路。
创建一个页面放置components或者pages中，接着在pages.json中注册当前页面，并设置背景色透明及取消导航栏。
{
"path": "components/ymt-updateModel/ymt-updateModel",
"style": {
"navigationStyle": "custom",
"app-plus": {
"animationType": "fade-in",//动画效果
"background": "transparent",//背景透明
"backgroundColor": "rgba(0,0,0,0)",//背景透明
"popGesture": "none"//禁止苹果侧滑返回
}
}
}
配置创建页面的背景色透明及添加遮罩层文章来源：https://www.toymoban.com/news/detail-687482.html
<view @click="close" class="mask">
<view @click.stop="onClick" class="content">
<text class="text">点击蒙层关闭</text>
</view>
</view>
page {
background: transparent;
}
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
}
这样一个页面就配置完成了 ，只需要在mask下绘制你的弹窗内容即可，在页面中调用直接使用uni.navigateTo跳转建立的页面即可。文章来源地址https://www.toymoban.com/news/detail-687482.html
到了这里，关于uniapp全屏弹窗，覆盖原生控件导航栏和tabbar，全局调用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
