uniapp小程序自定义tabbar

在App.vue中的onShow生命周期中隐藏原生tabBar

onShow: function() {
      // 隐藏原生tabbar
      uni.hideTabBar({
        animation: false
      })
      console.log('App Show')
},

“errMsg”:”hideTabBar:fail not TabBar page”

如果有些页面并没有tabbar展示，而此时调用该function会fail，如果没有fail函数，会直接抛出报错。

// 隐藏官方tabbar
// #ifdef MP-WEIXIN
	uni.hideTabBar({
		animation: false,
			success: () => {
		},
		fail: () => {
			// 捕获报错，防止没有tabbar页面调用后控制台报错
		}
	});
//#endif

tabbar组件

<template>
  <view class="tabbar">
    <view class="tab" v-for="(item,index) in tabbarList" :key="index" @click="navigatorTo(item.url)">
      <!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
      <image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon"
        mode="widthFix"></image>
      <view :class="current == index ?'active':'text'">{{item.name}}</view>
    </view>
 
  </view>
</template>
 
<script>
  export default {
    name: "tabbar",
    props: {
      current: {
        type: Number,
        default: 0, //默认第一个页面tabbar激活
      },
    },
 
    data() {
      return {
        tabbarList: [
			{
			  type: 0,
			  icon: '/static/tabbar/home.png',
			  selectIcon: '/static/tabbar/home-s.png',
			  name: '首页',
			  url: '/pages/home/home',
			}, 
			{
			  type: 0,
			  icon: '/static/tabbar/yx.png',
			  selectIcon: '/static/tabbar/yx.png',
			  name: '新闻',
			  url: '/pages/news/list',
			},
			{
			  type: 0,
			  icon: '/static/tabbar/dc.png',
			  selectIcon: '/static/tabbar/dc.png',
			  name: '产品',
			  url: '/pages/ground/list',
			},
			{
			  type: 0,
			  icon: '/static/tabbar/ph.png',
			  selectIcon: '/static/tabbar/ph.png',
			  name: '案例',
			  url: '/pages/ranking/list',
			},
			{
			  type: 0,
			  icon: '/static/tabbar/me.png',
			  selectIcon: '/static/tabbar/me.png',
			  name: '我的',
			  url: '/pages/my/my',
			}
		]
      }
    },
    methods: {
      navigatorTo(e) {
        uni.switchTab({
          url: e,
        })
      },
    },
  }
</script>
 
<style lang="scss" scoped>
  .tabbar {
    position: fixed;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容iOS>= 11.2 */
    background-color: #FFFFFF;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding-top: 12rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
 
    .tab {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
 
    .imgsize {
      width: 56rpx;
      height: 56rpx;
    }
 
    .text {
      margin-top: 4rpx;
      padding-bottom: 12rpx;
      font-size: 20rpx;
      color: #333333;
      line-height: 20rpx;
    }
 
    .active {
      margin-top: 4rpx;
      padding-bottom: 12rpx;
      font-size: 20rpx;
      color: #2196F3;
      line-height: 20rpx;
    }
  }
</style>

页面

<template>
  <view>
    <!-- 根据身份展示不同的tabBar -->
    
    <tabbar :current="current" v-if="role===1"></tabbar>
	<userbar :current="current" v-if="role===2"></userbar>
    </view>
</template>
<script>
import tabbar from "@/components/common/Tabbar.vue";
import userbar from "@/components/common/TabbarUser.vue";
export default {
	components:{
		tabbar,
		userbar
	},
    data(){
       return {
         current:0,  // 根据需要传入对应的索引号
		 role:1, // 1,2
      }
    },
    onShow(){
      
      this.current = 0   // 根据需要传入对应的索引号
   }
}
</script>