示例代码:
<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>
效果展示: