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

举报
SHQ5785 发表于 2023/03/27 09:12:13 2023/03/27
【摘要】 一、前言应用uni-app跨平台框架进行项目开发过程中,需要实现版本更新时全页面弹窗,底部导航栏无法点击的效果。但是,在uni-app中popup弹窗及对话框的遮罩层是覆盖不了原生导航栏和tabbar栏的,而且在tabbar页中使用弹出框会非常的违和。 二、实现方案大致实现思路为:创建一个页面放置components或者pages中,接着在pages.json中注册当前页面,并设置背景色透...

一、前言

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

但是,在uni-apppopup弹窗及对话框的遮罩层是覆盖不了原生导航栏和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跳转至建立的新页面即可。

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。