Taro里面有什么方法能有动态的tabbar？

[soymikey]

现在有个项目， 有用户账号和商家账号。 登陆的时候用户和商家tabbar是不一样的。 小程序原生的tabbar 不能动态的加载。 我试过用Taro UI 的tabbar, 但是遇到问题，当我在handleclick的函数调用Taro.navigateto，页面会重新加载，而且超过十个页面后就不可以了。 Tarbar之间没有小程序自带的switchTo 的切换功能。
请问有什么方法能解决动态tabbar的问题吗？ 谢谢~~

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Garfield550]

wx.showTabBar(Object object)
wx.hideTabBar(Object object)
wx.setTabBarItem(Object object)

给你三个官方 API，你可以考虑一下怎么实现

[soymikey]

wx.showTabBar(Object object)
wx.hideTabBar(Object object)
wx.setTabBarItem(Object object)

给你三个官方 API，你可以考虑一下怎么实现
这个tabbar 的字段和icon可以改， 但是里面的导航还是改不了呀。

[Garfield550]

@soymikey
我的见识比较少，只能想到这么点了，上面确实解决不了你想定义多个 TabBar List

1. 至于 AtTabBar ，虽然能解决动态定义 TabBar 的样式和路径，但是不论是 redirectTo 还是 navigateTo 都会涉及 TabBar 重绘；

2. 至于小程序自身支持的自定义 TabBar，依然不能逃过 TabBar 只有 5 个路径的限制，不过我很惨烈的实现了模拟一下动态切换 TabBar 的路径，如下图：
   
   
   由于是在不能超过 5 个 TabBar ，所以只能个人页面三个商家页面两个，我也很无奈啊...
   最关键的是商家页面切换 Tab 的时候还有 Bug
   无奈我能力有限只能做到这里了...

https://developers.weixin.qq.com/s/zySmqxmp706w
从 1.02.1812180 开始代码片段格式更换，旧版本 IDE 将无法导入该版本及之后的 IDE 分享的片段
链接打不开你用这个压缩包

3. 至于只用原生 TabBar，然后使用 wx.setTabBarItem(Object object) ，虽然只能换一下标题和图标，但是你可以在页面的 onLoad （componentWillMount()）生命周期里切换你要展现的元素，比如用户的页面用一个组件包装一下，商家的页面用一个组件包装一下，麻烦是麻烦点，但也只能是我想到的一点方案了。

[soymikey]

@soymikey
我的见识比较少，只能想到这么点了，上面确实解决不了你想定义多个 TabBar List

1. 至于 AtTabBar ，虽然能解决动态定义 TabBar 的样式和路径，但是不论是 redirectTo 还是 navigateTo 都会涉及 TabBar 重绘；
2. 至于小程序自身支持的自定义 TabBar，依然不能逃过 TabBar 只有 5 个路径的限制，不过我很惨烈的实现了模拟一下动态切换 TabBar 的路径，如下图：
   
   
   由于是在不能超过 5 个 TabBar ，所以只能个人页面三个商家页面两个，我也很无奈啊...
   最关键的是商家页面切换 Tab 的时候还有 Bug
   无奈我能力有限只能做到这里了...

https://developers.weixin.qq.com/s/zySmqxmp706w
从 1.02.1812180 开始代码片段格式更换，旧版本 IDE 将无法导入该版本及之后的 IDE 分享的片段
链接打不开你用这个压缩包

1. 至于只用原生 TabBar，然后使用 wx.setTabBarItem(Object object) ，虽然只能换一下标题和图标，但是你可以在页面的 onLoad （componentWillMount()）生命周期里切换你要展现的元素，比如用户的页面用一个组件包装一下，商家的页面用一个组件包装一下，麻烦是麻烦点，但也只能是我想到的一点方案了。

学习了。
但是还有个不是很明白， 在index 的页面的时候 onload 函数没有设置 tabbar list 为什么还显示出3个tarbar？

[Garfield550]

@soymikey 在自定义组件里，你可以拿出来...

[soymikey]

@soymikey 在自定义组件里，你可以拿出来...

感谢你的帮助。Enjoy life， Happy day!

[xchunzhao]

@Garfield550 此种方案可以实现动态切换tabBar。但是有一个问题，无法进行小程序分包。

[liganghui]

翻东西翻到这里 , 之前在原生小程序做过动态tab-bar , 给同行个参考 万一以后用的到呢 .
我当时的需求根据用户角色 分三套不同的tabbar，同时支持在使用中动态更换 。
原理就是在小程序 custom-tab-bar 基础上 , 将custom-tab-bar 的数据来源替换为 全局变量 . 通过更改全局变量的数据 实现导航的动态切换。
在实现的过程遇到奇怪的BUG , 切换导航后switchTab 事件的值会异常 , 我又追加了一些纠正逻辑 .
核心代码如下，建议根据自身需求改一下

// app.js   
// 存储tab-bar的数据 , 需求更换时 重新给tabList赋值就行了
    tabList:[],
   tabListType:1, // tab-bar 类型 可选值： 1 or 2  。1:代表默认导航条的情况 2:登录后需要重置导航菜单的特殊情况
    tabBar_1: [{
      pagePath: "/pages/index/index",
      iconPath: "/images/tabBar-1-1.png",
      selectedIconPath: "/images/tabBar-1-2.png",
      text: "首页"
    }, {
      pagePath: "/pages/leaderboard/index",
      iconPath: "/images/tabBar-2-1.png",
      selectedIconPath: "/images/tabBar-2-2.png",
      text: "排行榜"
    }, {
      pagePath: "/pages/user/user",
      iconPath: "/images/tabBar-3-1.png",
      selectedIconPath: "/images/tabBar-3-2.png",
      text: "个人中心"
    }],
    tabBar_2: [{
      pagePath: "/pages/index/index",
      iconPath: "/images/tabBar-1-1.png",
      selectedIconPath: "/images/tabBar-1-2.png",
      text: "首页"
    }, {
      pagePath: "/pages/user/user",
      iconPath: "/images/tabBar-3-1.png",
      selectedIconPath: "/images/tabBar-3-2.png",
      text: "个人中心"
    }],
    tabBar_3: [{
      pagePath: "..........",
      iconPath: "/images/tabBar-1-1.png",
      selectedIconPath: "/images/tabBar-1-2.png",
      text: "xxxx"
    }, {
      pagePath: "...........",
      iconPath: "/images/tabBar-4-1.png",
      selectedIconPath: "/images/tabBar-4-2.png",
      text: "xxx" 
    }],

// custom-tab-bar/index.js
const app = getApp();
Component({
  data: {
    selected: 0,
    color: "#999",
    selectedColor: "#211e38",
    list: app.globalData.tabList,
    activeIndex:0
  },
  methods: {
    // 切换tab时触发的更新Url事件
    switchTab(event) {
      let index;
      // 当tabListType==2时 event.detail的值会异常 需要手动处理
      if(app.globalData.tabListType==2){
        if(event.detail==2){
          index=1
        }else if(event.detail==1){
          index=2
        }else{
          index = event.detail;
        }
      }else{
         index = event.detail;
      }
      const url = this.data.list[index].pagePath;
      wx.switchTab({
        url
      })
    },
    // 更新底部导航栏
    updateTab(i){
      if(i===1){
        this.setData({
          list:app.globalData.tabBar_1
        })
        app.globalData.tabList=app.globalData.tabBar_1;
      }else if(i===2){
        this.setData({
          list:app.globalData.tabBar_2
        })
        app.globalData.tabList=app.globalData.tabBar_2;
      }
    }
  }
})

// 在各个页面中需要手动更改选中状态

//index.js

      // 更新tabBar选中状态
      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
        if (this.getTabBar().data.list.length !== app.globalData.tabList.length) {
          this.getTabBar().setData({
            list: app.globalData.tabList
          })
        }
      }

// user.js

      // 控制Tabbar 标签栏的切换  
      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        if (app.globalData.tabListType == 2) {
          this.getTabBar().setData({
            list: app.globalData.tabList
          })
          this.getTabBar().setData({
            selected: 1
          })
        } else if (app.globalData.tabList.length == 3) {
          this.getTabBar().setData({
            selected: 2
          })
        } else {
          this.getTabBar().setData({
            selected: 1
          })
        }
      }

实际调用示例：
1. app.js 初始化时根据缓存身份变更导航
 this.globalData.tabList = this.globalData.tabBar_xxxx
2. 使用中 手动重置导航
  this.getTabBar().updateTab(1);
  app.globalData.tabListType = 2;