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）

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 })
  }
})