TabBar

The TabBar is the bottom tab bar component. It supports multiple tabs, switching, and grouping.

Configuration

Configure the TabBar in app.json:

{
  "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"
      }
    ]
  }
}

Options

Field	Type	Description
color	string	Unselected text color
selectedColor	string	Selected text color
backgroundColor	string	Background color
borderStyle	"black" | "white"	Top border style
list	TabBarItem[]	Tab items (2–5)

Tab groups (groupIndex)

The TabBar can use groupIndex to group tabs so different groups show different tab items.

Example configuration

{
  "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"
      }
    ]
  }
}

Switching groups

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

groupIndex default

If groupIndex is omitted, it defaults to "1". When the group changes, the TabBar shows the tab items for that group.

Dynamic control

Show / hide

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

Badges

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

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

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

Updating tab items at runtime

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

Changing styles

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

Full example: unread message count

// 每次进入首页时检查未读消息
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 })
  }
})