TabBar 标签栏

TabBar 是页面底部的标签栏组件，支持多标签切换和分组功能。

配置

在 app.json 中配置 TabBar：

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#6366f1",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icons/home.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/discover/index",
        "text": "发现",
        "iconPath": "static/icons/discover.png",
        "selectedIconPath": "static/icons/discover-active.png"
      },
      {
        "pagePath": "pages/profile/index",
        "text": "我的",
        "iconPath": "static/icons/profile.png",
        "selectedIconPath": "static/icons/profile-active.png"
      }
    ]
  }
}

配置字段

字段	类型	说明
color	string	未选中文字颜色
selectedColor	string	选中文字颜色
backgroundColor	string	背景色
borderStyle	"black" | "white"	上边框样式
list	TabBarItem[]	标签项列表（2~5 项）

Tab 分组（groupIndex）

TabBar 支持通过 groupIndex 将标签分组，不同分组的标签栏内容不同。

配置示例

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "groupIndex": "1"
      },
      {
        "pagePath": "pages/explore/index",
        "text": "探索",
        "groupIndex": "1"
      },
      {
        "pagePath": "pages/drive/index",
        "text": "驾驶",
        "groupIndex": "2"
      },
      {
        "pagePath": "pages/vehicle/index",
        "text": "车辆",
        "groupIndex": "2"
      }
    ]
  }
}

分组切换

// 切换到 Tab 分组 2 的页面
await woo.navigateToTab({
  url: '/pages/drive/index',
  groupIndex: '2',
})

groupIndex 默认值

未声明 groupIndex 时默认为 "1"。切换分组时，TabBar 自动显示对应分组的标签项。

动态控制

显示/隐藏

await woo.hideTabBar()  // 隐藏（如进入详情页时）
await woo.showTabBar()  // 显示（如返回列表页时）

设置徽标

// 显示数字徽标
await woo.setTabBarBadge({ index: 1, text: '5' })

// 显示红点
await woo.showTabBarRedDot({ index: 2 })

// 清除
await woo.removeTabBarBadge({ index: 1 })
await woo.hideTabBarRedDot({ index: 2 })

动态更新标签项

await woo.setTabBarItem({
  index: 0,
  text: '主页',
  iconPath: '/static/icons/home-v2.png',
  selectedIconPath: '/static/icons/home-v2-active.png',
})

修改样式

await woo.setTabBarStyle({
  color: '#666666',
  selectedColor: '#ff4757',
  backgroundColor: '#fafafa',
  borderStyle: 'black',
})

完整示例：消息未读数

// 每次进入首页时检查未读消息
woo.onShow(async () => {
  const res = await woo.request.get('/api/messages/unread-count')
  const { count } = res.data

  if (count > 0) {
    await woo.setTabBarBadge({
      index: 1, // 消息 Tab 的索引
      text: count > 99 ? '99+' : String(count),
    })
  } else {
    await woo.removeTabBarBadge({ index: 1 })
  }
})