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

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跳转建立的页面即可。

你可能感兴趣的:(uni-app,VUE,Ios,前端,uni-app,ios)