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>

效果展示:

相关推荐
甜甜的资料库19 分钟前
基于微信小程序的睡眠宝系统源码数据库文档
数据库·微信小程序·小程序
华子w90892585921 分钟前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
恰薯条的屑海鸥2 小时前
关于我对各开发语言的看法与接下来的文章内容
开发语言·学习·微信小程序·网站开发·全栈开发
性野喜悲2 小时前
uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显示,有数据加载时暂无数据闪现(先加载空数据)问题
uni-app
Stanford_11063 小时前
关于大数据的基础知识(二)——国内大数据产业链分布结构
大数据·开发语言·物联网·微信小程序·微信公众平台·twitter·微信开放平台
假客套5 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
微信·uni-app·旅游
邹荣乐6 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
xw56 小时前
支付宝小程序外链跳转调试爬坑
uni-app·支付宝
^Rocky6 小时前
uniapp 对接腾讯云IM群组成员管理(增删改查)
uni-app·腾讯云
假客套8 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
前端·uni-app·旅游