uniapp 微信小程序自定义tabbar层级低于canvas解决方案

示例代码:

html 复制代码
<template>
	<cover-view class="tab">
		<cover-view class="navView" @tap="switc('/pages/index/index')">
			<cover-image :src="tabname ==='index'?'/static/tabbar/overide-sel.png':'/static/tabbar/overide.png'" class="navView-img"/>
			<cover-view :class="tabname ==='index'?'tabTextActive':'tabText'">数据概览</cover-view>
		</cover-view>
		<cover-view class="navView" @tap="switc('/pages/workhub/workhub')">
			<cover-image :src="tabname ==='workhub'?'/static/tabbar/workhub-sel.png':'/static/tabbar/workhub.png'" class="navView-img"/>
			<cover-view :class="tabname ==='workhub'?'tabTextActive':'tabText'">工作台</cover-view>
		</cover-view>
		<cover-view v-if="is_staff != 3" class="navView" @tap="switc('/pages/my/my')">
			<cover-image :src="tabname ==='my'?'/static/tabbar/my-sel.png':'/static/tabbar/my.png'" class="navView-img"/>
			<cover-view :class="tabname ==='my'?'tabTextActive':'tabText'">我的</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default{
		props:{
			tabname:{ type:String,default:'home' }
		},
		computed:{
			...mapGetters(['is_staff'])
		},
		mounted() {
			uni.hideTabBar({
				success() {},
				fail() {}
			})
		},
		methods:{
			switc(val){
				if(!val)return;
				uni.switchTab({url:val})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		z-index: 99999 !important;
		width: 100%;
		height: 144rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 4rpx #b8b8b8;
		padding-top: 10rpx;
		.navView{
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			.navView-img{
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}
			.tabText{
				font-size: 20rpx;
				color: #A5A5A5;
			}
			.tabTextActive{
				font-size: 20rpx;
				color: #FE8B1F;
			}
		}
	}
</style>

效果展示:

相关推荐
2501_915918413 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
腾马科技10 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
用户9047066835714 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
郑叔敲代码15 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
乔冠宇15 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡15 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa15 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名18 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风19 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者819 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview