uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗
【摘要】 一、前言应用uni-app跨平台框架进行项目开发过程中,需要实现版本更新时全页面弹窗,底部导航栏无法点击的效果。但是,在uni-app中popup弹窗及对话框的遮罩层是覆盖不了原生导航栏和tabbar栏的,而且在tabbar页中使用弹出框会非常的违和。 二、实现方案大致实现思路为:创建一个页面放置components或者pages中,接着在pages.json中注册当前页面,并设置背景色透...
一、前言
应用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
跳转至建立的新页面即可。
三、拓展阅读
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)