跨平台应用开发进阶(三十一) ：uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗

Posted 2023-01-22 No Silver Bullet

文章目录

• • 一、前言
  • 二、实现方案
  • 三、拓展阅读

一、前言

应用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专栏》