公告列表
公告列表
收藏
回答

自定义的tabBar，提示["tabBar"]["list"] 不能超过 10 项？

使用了自定义的custom-tab-bar组件，不同页面的底部菜单栏内容都是不一样的，但是这些不同页面菜单栏的页面路径都必须配置在app.json的tabbar.list中，才能实现正常的切换。目前的问题是，app.json的tabbar.list中 最多只能配置10条，再多就编译报错，这种情况该如何处理呢？

回答关注问题邀请回答
收藏

4 个回答

  • 云淡风轻
    云淡风轻
    05-14
    可以自己在手写一个组件，复用custom-tab-bar的页面和css，然后核心的页面定义到app.json里面，非核心的定义到 tab-service.js 里面。
整体思路就是基于custom-tab-bar再手写一个组件，去处理扩展菜单。其实如果不介意每次进入页面都刷新的话，完全只使用自己写的组件也是可以的。
1. 多一个isTab字段用于区分是真正的菜单，还是扩展菜单
const updateRole = (that, type) => {
  //这里设置权限（分2种权限，权限1显示1，2，3， 4，5；权限2显示6，7，8，9，10；权限3显示11，12，13，14，15）
 if (type === '0') {
    tabData.tabBar.list=[
      {
        "isTab": true,
        "pagePath": "pages/teacher/teacher",
        "text": "老师电源",
        "iconPath": "/images/0011.png",
        "selectedIconPath": "/images/0012.png"
      },
      ........
  }
  updateTab(that);
}
2. updateTab 时，将菜单的数据传递给页面的data，再有页面传递给组件
// 更新Tab状态
const updateTab = (that) => {
  if (typeof that.getTabBar === 'function' && that.getTabBar()) {
    that.getTabBar().setData(tabData);
  } else {
    that.setData({
      tabIndex: tabData.tabIndex,
      tabBar: tabData.tabBar
    });
  }
}
3. 核心菜单保持custom-tab-bar现有逻辑即可，扩展菜单页面需要引入组件，页面配置如下：
<menu tabIndex="{{tabIndex}}" tabBar="{{tabBar}}"></menu>
4. switchTab 时，根据isTab区分是真菜单还是扩展菜单，然后分别跳转
switchTab(event) {
    // data为接受到的参数
    const data = event.currentTarget.dataset;
    console.log(data);
    if(data.istab){
      wx.switchTab({url: data.path});
    } else{
      wx.navigateTo({url: data.path});
    }
}
    05-14
    有用
    回复
  • showms
    showms
    2024-12-16

    在手机上显示10个以上的tab你觉得合理嘛

    2024-12-16
    有用
    回复 3
    • 云淡风轻
      云淡风轻
      05-11
      配置10个不一定显示10个啊，三个不同身份的人登录，每个人4-5个菜单也合理吧
      05-11
      赞
      回复
    • showms
      showms
      05-12回复云淡风轻
      那就换个思路嘛，定义一个json，不同角色从这个json取不同的菜单数组出来，保证这些数据长度不超过10
      05-12
      赞
      回复
    • 云淡风轻
      云淡风轻
      05-14
      你是没遇到跟他相同的场景，自己定义的json数量当然是没有限制的，但是想要通过custom-tab-bar把底部菜单加载出来，必须把页面定义到app.json的，仅仅在自己配的json里面是不会显示的。
      05-14
      赞
      回复
  • 那一抹微笑😊穿透阳光
    那一抹微笑😊穿透阳光
    2024-12-16

    微信限制的多少，就只能设置多少个

    2024-12-16
    有用
    回复
  • 一笑皆春
    一笑皆春
    2024-12-16

    建议在看看文档，如果确认没问题，低于10个自定义的tabbar能正常展示的话，那可能就是限制最多配置10个页面

    2024-12-16
    有用
    回复
请 登录 后发表内容