最近在开发微信小程序的时候有这样一个需求，用户登录后会面临两种身份，两种身份有各自的tabbar页面，并且tabbar的个数也不一样。

        遇到这样的需求首先想到的是切换另一种用户身份的时候，隐藏当前用户身份的tabbar，再去显示另一种用户身份的tabbar，去看了uniapp的文档查如何隐藏tabbar，结果是微信小程序不能隐藏。只有在app和h5上才有效。

        没办法了，只能自定义tabbar，我用的是uview。所以先去uview官网下载一个自定义tabbar示例 v1.uviewui.com。项目直接运行后打开就是一个自定义tabbar示例。查看项目pages.json文件夹内，配置项tabBar依然是要配好的。接下来增加一些页面模拟tabbar个数切换。

tabbar数量不超过五个

打开pages.json把新增的两个页面配置到tabbar上，现在tabbar有五个页面。这里我将 组件、工具、模板 作为一种用户身份下显示的tabbar。将组件、主页、我的作为另一种用户身份下显示的tabbar。因为每个页面写的tabbar配置项都大差不差，所以我把这些属性和方法通过 mixin 混入进每个页面中。由于需要状态切换，我这里使用了vuex，就不展示vuex代码了，主要展示混入的代码。

import {mapState} from 'vuex';

export default {
  computed: {
    ...mapState(['vuex_status'])  
  },
  data() {
    return {
      tabbar: ''
    }
  },
  methods: {
    tabbarItem() {
      if (this.vuex_status === 'user') {
        return [
          {
            iconPath: "/static/uview/example/component.png",
            selectedIconPath: "/static/uview/example/component_select.png",
            text: '组件',
            count: 2,
            isDot: true,
            pagePath: "/pages/index/index"
          },
          {
            iconPath: "/static/uview/example/js.png",
            selectedIconPath: "/static/uview/example/js_select.png",
            text: '工具',
            midButton: true,
            pagePath: "/pages/js/index"
          },
          {
            iconPath: "/static/uview/example/template.png",
            selectedIconPath: "/static/uview/example/template_select.png",
            text: '模板',
            pagePath: "/pages/template/index"
          }
        ]
      } else if (this.vuex_status === 'admin') {
        return [
          {
            iconPath: "/static/uview/example/component.png",
            selectedIconPath: "/static/uview/example/component_select.png",
            text: '组件',
            count: 2,
            isDot: true,
            pagePath: "/pages/index/index"
          },
          {
            iconPath: "/static/uview/example/js.png",
            selectedIconPath: "/static/uview/example/js_select.png",
            text: '主页',
            midButton: true,
            pagePath: "/pages/home/index"
          },
          {
            iconPath: "/static/uview/example/template.png",
            selectedIconPath: "/static/uview/example/template_select.png",
            text: '我的',
            pagePath: "/pages/mine/index"
          }
        ]
      }
    },
  },
  onLoad() {
    this.tabbar = this.tabbarItem();
  }
}

在页面上去选择用户身份后就可以改变底部tabbar，如何改变vuex_status的代码也不展示了。实际效果如下。

tabbar图标我没有换，可以看到tabbar已经随着用户的状态改变了，如果你的需求的tabbar是五个及以下，这个方案就是最完美的。

tabbar数量超过五个

        但是事情没有那么简单，我的需求一共有七个，微信小程序tabbar最多只能配置五个，所以这个方案就不行了，所以就得找其它方案。

        既然微信小程序最多只能配置五个，那我就不用默认的跳转。不去配置tabbar总可以吧。uview的tabbar组件可以监听tabbar的切换，所以在切换时可以自己控制tabbar切换。效果如下。

应该能发现这种方案下的一个问题，就是当切换tabbar的时候，每次都会重新加载当前页面页面会白屏一会儿。这样对于用户体验上来说非常不好。上面的那种方案就不会存在这样的问题。本着前端开发客户的体验就是最重要的这条原则，还得改方案。

tabbar数量超过五个另一种方案

如果想保证用户体验好，那就还得去pages.json配置tabbar。但是tabbar又不能超过五个。权衡之下，还是使用了在页面上根据不同的用户类型显示不同的部分。

        假如两种tabbar是A B C D、E F G，那么就把E页面放在A页面内，F页面放在B页面内，G页面放在C页面内。这样根据类型来判断显示哪部分，tabbar个数也不会超过5个。这样对开发会造成一定的困扰，不过，目前最好的解决方案就是这样了。

如果有哪位大佬有更好的解决方案，希望在文章下面评论，感谢。