uniapp全屏弹窗,覆盖原生控件导航栏和tabbar,全局调用

8 篇文章 0 订阅
4 篇文章 1 订阅

uniapp全屏弹窗,覆盖原生控件导航栏和tabbar,全局调用

在uniapp中popup弹窗及对话框的遮罩层是覆盖不了原生的导航栏和tab栏的,在tabbar页中使用弹出框会非常的违和,接下来告诉大家实现的思路。
创建一个页面放置components或者pages中,接着在pages.json中注册当前页面,并设置背景色透明及取消导航栏。

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

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

<view @click="close" class="mask">
		<view @click.stop="onClick" class="content">
			<text class="text">点击蒙层关闭</text>
		</view>
	</view>
page {
		background: transparent;
	}

	.mask {
		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);
	}

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

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值