示例代码： 

<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>

效果展示：