ios uniapp tabbar被顶上去 uniapp覆盖tabbar

uniapp自定义modal弹窗，可覆盖标题栏和tabbar

• 前言
• 思路
• 实现
• 尾巴

前言

在开发过程中，我们绝大部分时候会自定义modal弹窗来实现自己的需求，通过组件的方式实现标题栏和tabbar无法被mask覆盖，可能还会存在滚动穿透的问题。今天我们来通过另外一种方式来实现，可以让mask覆盖标题栏和tabbar，而且不会有滚动穿透问题。

思路

实现思路就是通过新启一个页面，把页面的背景设置为半透明来达到modal的效果，由于是新启页面，所以可以覆盖之前页面的标题栏和tabbar，但是这种方案只在APP上有效果，小程序上无法达到预期的效果。

实现

1、首先项目中配置一个tabbar，然后随便新建两个页面，pages.json部分配置如下：

//省略页面的配置
...
"tabBar": {
		"color": "#959595",
		"selectedColor": "#007aff",
		"backgroundColor": "#f9f9f9",
		"borderStyle": "white",
		"fontSize": "12px",
		"iconWidth": "24px",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "首页"
		}, {
			"pagePath": "pages/second/thrid",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "我的"
		}]
	}

手机上运行效果图如下：

2、然后再新建一个页面用来做自定义modal弹窗，pages.json中配置如下：

//省略部分代码
...
{
    "path" : "pages/second/second",
    "style" :                                                                                    
     {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false,
		 "navigationStyle": "custom",
		 "app-plus": {
			"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
			 "background": "transparent", // 背景透明
			 "backgroundColor": "transparent", // 背景透明
			 "webviewBGTransparent":true,
			 "mask":"none",
			 "popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能		
		  }				              
     }                       
}
//省略部分代码
...

3、然后再页面中设置好page的背景和mask点击消失的事件，代码如下：

<template>
	<view class="mask" @click="dimiss">
		<view class="content">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
		    //点击mask消失，由于是页面实际相当于返回
			dimiss(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
page {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
.mask {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
.content {
	width: 600rpx;
	height: 800rpx;
	border-radius: 20rpx;
	background-color: white;
}
</style>

4、首页中点击logo弹出页面：

//省略部分代码
...
tap(){
	uni.navigateTo({
		url: "../second/second"
	})			
//省略部分代码
...				
}

手机上运行效果图如下：

可以看到标题栏和tabbar已经成功被mask覆盖。这里只是为了展示效果，页面元素就随便写了一点，不要喷，狗头保命。

尾巴

今天的内容相对来说比较简单，但是特别要注意这种方式只适用于APP。