在小程序开发者，自定义tabbar，根据权限角色不同，显示不同的tabbar，经常遇到，这里给出一个解决方案。

1、修改app.json

"tabBar": {
    "custom":true
 }

2、在项目根目录创建一个文件夹 custom-tab-bar，组件，如图

custom-tab-bar/index.js

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active: -1,
    list: [
      { value: 0, show: true, label: '首页', icon: 'home', url: '/pages/index/index' },
      { value: 1, show: true, label: '订单', icon: 'task', url: '/pages/order/index/index' },
      { value: 2, show: true, label: '我的', icon: 'user', url: '/pages/my/index/index' },
    ],

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange({detail: {value}}) {
      const {list} = this.data;
      console.log('value', value)
      this.setData({
        active: value,
      });
      wx.switchTab({
        url: list[value].url,
      })
    },
    init() {
      const page = getCurrentPages().pop();
      let urls = this.data.list.map(v => v.url);
      let active = urls.findIndex(v => v === `/${page.route}`);
      console.log('active',active)
      this.setData({
        active
      });
    }，
	toggleMenu(role) {
    	// 在这里处理具体的权限业务逻辑
        // 下面是伪代码
        let {list} = this.data;
        if (role == 1) {
        	list[1].show = false;
            this.setData({list});
        }
    },
  }
})

custom-tab-bar/index.json

{
  "component": true,
  "usingComponents": {
    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
    "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
  }
}

custom-tab-bar/index.wxml

<t-tab-bar t-class="t-tab-bar" value="{{active}}" bindchange="onChange" theme="tag" split="{{false}}">
	<block  wx:for="{{list}}">
	  <t-tab-bar-item wx:if="{{item.show}}" wx:key="index" value="{{item.value}}" icon="{{item.icon}}">
    	{{item.label}}
	  </t-tab-bar-item>
  </block>
</t-tab-bar>

3、在tabbar关联页面初始化tabbar组件的init方法

上面我们在tabbar写了三个路由，那么在这三个相对应的页面，都要调用一下下面的代码

onShow() {
    this.getTabBar().init()
  },

通过以上步骤已经实现了自定义tabbar的逻辑。

关于角色权限下的tabbar

在有些场景下，我们需要权限来控制显示tabbar，这个时候，我们可以在首页，请求数据，然后调用this.getTabBar().toggleMenu(); 来改变要显示的菜单，这样我们根据角色权限的tabbar就完成了。