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

2022-12-21
江苏
本文字数：811 字
阅读完需：约 3 分钟

一、前言

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

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

二、实现方案

大致实现思路为：创建一个页面放置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>