覆盖原生tabbar遮罩

背景：根据需求需要制作一个所有页面可以调用的弹框组件，但是在做遮罩的时候，发现遮罩层不会遮罩tabbar。又因为自定义tabbar方式有缺陷，所以才有如下方式。 思路： 1、在App端：使用5+api方式来判断当前是tabbar页面就使用原生写法遮挡住tabbar部分即可 2、在小程序端：只有使用uni.hideTabBar()来隐藏这个操作了

定义调用原生遮罩js

//mask.js
const $evt = {
	maskLayer:null,//原生弹框对象
	//加载弹框
	nativeObject() {
		const that = this;
		uni.getSystemInfo({
			success: function (res) {
				// 获取到屏幕总高-可用屏幕高(因为我这里是自定义的导航栏，所以导航栏也算在可用屏幕高里面的)
				that.nativeObjects(res.screenHeight,res.windowHeight)
			}
		});
		
		
	},
	nativeObjects(e,i){
		let heights = e-i
		//打开等待弹框
		//this.maskLayer.show()
		
		//关闭等待框
		//this.maskLayer.hide();
		
		//屏幕宽度
		const screenWidth = plus.screen.resolutionWidth;
		//屏幕高度
		const screenHeight = plus.screen.resolutionHeight;
		
		// 弹窗遮罩层(这里只做遮罩tabbar部分)
		this.maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
			bottom: '0px',
			left: '0px',
			height: heights+'px',
			width: '100%',
			backgroundColor: 'rgba(0,0,0,0.4)'
		});
	},

	// 打开弹框
	maskLayerShow(){
		this.maskLayer.show()
	},
	// 关闭弹框
	maskLayerHide(){
		this.maskLayer.hide()
	},
}
export default $evt

编写组件

<template>
	<!-- 各种状态弹框 -->
	<view class="hints">
		
	</view>
</template>

<script>
	import masks from '@/common/mask.js'
	export default {
		
		data() {
			return {
				
			}
		},
		props: {
			
		},
		// 在实例创建完成后被立即调用
		created(){

			console.log('初始调用')

			var pages = getCurrentPages() // 获取栈实例
			let currentRoute = pages[pages.length - 1].route;
			//监听的当前页面不是钥匙页面或我的页面，则不执行下面操作
			let curren = ['pages/home/home','pages/user/user','pages/position/position','pages/positions/positions'] 
			if(curren.includes(currentRoute)){
				// app端在tabbar部分，使用原生遮罩来遮罩底部选项一部分区域
				// #ifdef APP-PLUS
				masks.nativeObject()
				masks.maskLayerShow()
				// #endif
				
				// 小程序端tabbar部分，则是隐藏tabber部分
				// #ifdef MP-WEIXIN
				uni.hideTabBar()
				// #endif
			}
		},
		beforeDestroy(){
			console.log('销毁调用')
			
		},
		methods: {
			

		}
	}
</script>

<style lang="scss" scoped>
	.hints{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100vh !important;
		background-color: rgba(0,0,0,0.4);
	}
</style>

页面使用

<!-- index.vue -->
<template>
	<!-- 消息通知弹框 -->
	<view>
		<uni-hints  v-if="noStatus"></uni-hints>
		<view class=""  @click="onClink" style="width: 100%;height:80vh;text-align: center;line-height: 80vh;">
			各种弹框
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		
		methods: {
			onClink(){
				this.noStatus = true
			},
			
		}
	}
</script>

<style>

</style>