如何在uniapp中弹出层弹出时遮住自带的tabbar

前提问题

vue3组合式API，uniapp写微信小程序，点击下方导航，点击进入导航页面，在页面点击按钮需要弹出一个弹出层，使用uniapp自带的uni-popup，进行弹出，uniapp自带的tabbar层级较高，无法遮挡，导弹出层底部依旧存在下方导航栏

解决过程

1.uni-popup弹出层实现
2.在无法遮挡的情况下考虑在弹出层弹出时，tabbar不显示，弹出层关闭时，tabbar不显示
3.弹出层打开或关闭的提示同时隐藏或显示tabbar，会出现弹出层未关闭完全时，tabbar已经出现，影响交互体验
4.弹出层会在弹出层内部内容上下滑动时有时会引起整体弹出层上下动的现象，要固定住弹出层
5.弹出层弹出后，不仅弹出层可以进行滑动和点击，遮罩层下的数据也可以滑动

解决结果

1.实现uni-popup弹出层
页面代码

//点击按钮
全部任务


		
			
			
				
					取消
				
				
					选择任务状态
				
				
					确定
				
			
			
			
				
					
						{{item.value}} 
						
					
				
			
		

js代码

//全部任务-底部弹出层
const popupCoupon = ref(null)
const toggle = () =>{
	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
	popupCoupon.value.open('bottom')
}
//弹出层-选中任务状态
const popupSelect = el =>{
	
}
//关闭弹出层
const closePopup = () =>{
	popupCoupon.value.close()
}
//弹出层确认
const confirmPopup = () => {
	//关闭弹出层
	popupCoupon.value.close()
}

css代码

.popupBottom {
	height: 650rpx;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10rpx 20rpx;
	border-radius: 20rpx 20rpx 0 0;
	background-color: #fff;
}
.popupBtn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 10%;
}
.popupBtnL{
	color: #666666;
}
.popupBtnTtitle{
	font-size: 30rpx;
	font-weight: 500;
	color: #202020;
}
.popupBtnR{
	color: #2E5BFF;
}
.popupConAll{
	display: flex;
	flex-direction: column;
	margin: 10rpx 0;
}
.popupConItem{
	display: flex;
	align-items: center;
	margin: 10rpx 0;
}

2.显示或隐藏uniapp自带的tabbar
页面代码

js代码

//通过弹窗显隐控制导航栏的显示和隐藏
const popupChange = e =>{
	if(e.show){
        //隐藏tabbar
		uni.hideTabBar()
	}else{
        //显示tabbar
		uni.showTabBar()
	}
	state.searchIcon = e.show
}

3.延时关闭tabbar，提高交互体验

//通过弹窗显隐控制导航栏的显示和隐藏
const popupChange = e =>{
	if(e.show){
		uni.hideTabBar()
	}else{
		setTimeout(()=>{
			uni.showTabBar()
		},300)
	}
	state.searchIcon = e.show
}

4.固定弹出层，避免上下滑动
position: fixed;bottom: 0;left: 0;right: 0;将弹出层固定在底部
页面代码

css代码 

.popupBottom {
	height: 650rpx;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10rpx 20rpx;
	border-radius: 20rpx 20rpx 0 0;
	background-color: #fff;
}

5.阻止遮罩层默认滚动事件操作
页面代码

js代码

//空事件，阻止遮罩层的穿透事件
const emptyEvent = () => {
}

就先记录到这里吧~

欢迎大家帮忙补充~~