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>

效果展示:

相关推荐
Heyuan_Xie2 小时前
uni-app 选择国家区号
uni-app·uni-app插件·区号选择
晓风伴月7 小时前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习8 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
2501_9160137410 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
军军君0112 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
两个月菜鸟12 小时前
微信小程序进度条cavans
微信小程序·小程序
從南走到北12 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
htt232114 小时前
用uniapp开发鸿蒙应用(暂停更新-根据项目更新,现在项目未开始)
华为·uni-app·harmonyos
2501_9151063214 小时前
Fiddler 中文版抓包实战 构建标准化调试流程提升团队协作效率
android·ios·小程序·https·uni-app·iphone·webview
mg66815 小时前
微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
微信小程序·小程序