uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗

一、前言

应用uni-app跨平台框架进行项目开发过程中，需要实现版本更新时全页面弹窗，底部导航栏无法点击的效果。

但是，在uni-app中popup弹窗及对话框的遮罩层是覆盖不了原生导航栏和tabbar栏的，而且在tabbar页中使用弹出框会非常的违和。

二、实现方案

大致实现思路为：创建一个页面放置components或者pages中，接着在pages.json中注册当前页面，并设置背景色透明及取消导航栏。

{
    "path" : "pages/appUpdate/appUpdate",
    "style" :                                                                                    
    {
		"navigationStyle": "custom",
		"app-plus": {
			"animationType": "fade-in",//动画效果
			"background": "transparent",//背景透明
			"backgroundColor": "rgba(0,0,0,0)",//背景透明
			"popGesture": "none", //禁止苹果侧滑返回
			"disableSwipeBack": true // 禁止IOS侧滑事件
		}
    }
}

然后，配置创建页面的背景色透明及添加遮罩层。

<template>
	<view class="appUpdateMask" >
		<view class="appUpdateContent">
			
		</view>
	</view>
</template>

<style>
page {
	background: transparent;
}

.appUpdateMask {
	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);
}
.appUpdateContent {
	width: 80vw;
	height: 40vh;
	border-radius: 20rpx;
	background-color: white;
	justify-content: space-around;
	align-items: flex-start;
}
</style>

经过以上配置，这样一个页面就配置完成了 ，只需要在mask下绘制你的弹窗内容即可，在页面中调用直接使用uni.navigateTo跳转至建立的新页面即可。

三、拓展阅读

• 《Cross-platform APP专栏》