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>

效果展示:

相关推荐
华子w9089258592 小时前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app
浩宇软件开发2 小时前
基于微信小程序的校园二手交易平台
微信小程序·小程序·校园二手交易
柳中仙3 小时前
uniapp+vue3小程序分享
小程序·uni-app
烂笔头儿@5 小时前
uniapp开发小程序vendor.js 过大
小程序·uni-app
桃花岛主706 小时前
uniapp跳转到webview组件的时候,要注意:移除所有不可见字符(包括零宽空格)
uni-app
程序员阿龙8 小时前
计算机毕业设计微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统源码+论文+PPT+讲解 基于微信小程序的题库系统设计与实现
微信小程序·分类·课程设计·在线答题·题库系统·错题本管理·试题分类
Li.JJ8 小时前
小程序查广州楼盘网签数据和备案价(免费)
经验分享·微信小程序
甜甜的资料库12 小时前
基于微信小程序的作业管理系统源码数据库文档
java·数据库·微信小程序·小程序
甜甜的资料库12 小时前
基于微信小程序的车位共享平台的设计与实现源码数据库文档
数据库·微信小程序·小程序
^Rocky1 天前
uniapp 实现腾讯云IM群文件上传下载功能
uni-app·腾讯云