uniapp小程序自定义tabBar，根据身份切换自定义tabBar

1. 对于导航页自定义tabBar，仍需要在pages.json中配置tabBar

"tabBar": {
    // 此设置方法小程序真机无效,应在app中隐藏原生tab
    // "custom": true,
    // "selectedColor": "#2196F3",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "static/tab/home.png",
      "selectedIconPath": "static/tab/home-active.png"
    }, {
      "pagePath": "pages/notice/notice",
      "text": "公告",
      "iconPath": "static/tab/notice.png",
      "selectedIconPath": "static/tab/notice-active.png"
    }, {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "static/tab/my.png",
      "selectedIconPath": "static/tab/my-active.png"
    }]
  },

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

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

但发现切换的时候有时还是会出现原生tabBar，于是在每一个导航页的onShow生命周期中加上uni.hideTabBar({animation: false})来解决此问题

3. 在components下新建自定义组件文件，因为我是根据身份需要展示不同的tabBar，需建两个，这边仅展示一个为例

效果如下

 

4. 导航页中使用