Mobile Platform as a Service：tabBar

tabBar 使用說明

多 tab 小程式（小程式的底部欄可以切換頁面）可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

tabBar 配置

item 配置

程式碼範例

tabBar 程式碼範例如下：

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁"      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日誌"      }
    ]
  }
}

my.hideTabBar

版本要求：基礎庫版本 1.11.0 或更高版本，低版本需要做 相容處理。

該介面用於隱藏標籤頁（tabbar）。相關問題請參見 tabBar 常見問題。

程式碼範例

my.hideTabBar 程式碼範例如下：

my.hideTabBar({
    animation: true
})

入參

入參為 Object 類型，屬性如下：

my.hideTabBarRedDot

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於隱藏標籤頁（tabbar）某一項右上方的紅點。相關問題請參見 tabBar 常見問題。

效果樣本

程式碼範例

my.hideTabBarRedDot 程式碼範例如下：

my.hideTabBarRedDot({
  index: 0
})

入參

Object 類型，屬性如下：

my.removeTabBarBadge

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於移除標籤頁（tabbar） 某一項右上方的文本。相關問題請參見 tabBar 常見問題。

效果樣本

程式碼範例

my.removeTabBarBadge 程式碼範例如下：

my.removeTabBarBadge({
  index: 0
})

入參

Object 類型，屬性如下：

my.setTabBarBadge

版本要求：基礎庫 1.11.0 及以上版本。

該介面用於為標籤頁（tabbar）某一項的右上方添加文本。可用於設定訊息條數的紅點提醒。相關問題請參見 tabBar 常見問題。

效果樣本

程式碼範例

my.setTabBarBadge 程式碼範例如下：

my.setTabBarBadge({
  index: 0,
  text: '42'
})

入參

Object 類型，屬性如下：

my.setTabBarItem

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於動態設定標籤頁（tabbar）某一項的內容。相關問題請參見 tabBar 常見問題。

程式碼範例

my.setTabBarItem 程式碼範例如下：

my.setTabBarItem({
    index: 0,
    text: 'text',
    iconPath: '/image/iconPath',
    selectedIconPath: '/image/selectedIconPath'
})

入參

Object 類型，屬性如下：

my.setTabBarStyle

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於動態設定標籤頁（tabbar）的整體樣式，如文字顏色、標籤背景色、標籤邊框顏色等。相關問題請參見 tabBar 常見問題。

程式碼範例

my.setTabBarStyle 程式碼範例如下：

my.setTabBarStyle({
    color: '#FF0000',
    selectedColor: '#00FF00',
    backgroundColor: '#0000FF',
    borderStyle: 'white'
})

入參

Object 類型，屬性如下：

my.showTabBar

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於顯示標籤頁（tabBar）。相關問題請參見 tabBar 常見問題。

程式碼範例

my.showTabBar 程式碼範例如下：

my.showTabBar({
    animation: true
})

入參

Object 類型，屬性如下：

my.showTabBarRedDot

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於顯示標籤頁（tabbar）某一項的右上方的紅點。相關問題請參見 tabBar 常見問題。

程式碼範例

my.showTabBarRedDot 程式碼範例如下：

my.showTabBarRedDot({
  index: 0
})

入參

Object 類型，屬性如下：

onTabItemTap

版本要求：基礎庫 1.11.0 或更高版本，若版本較低，建議做 相容處理。

該介面用於點擊標籤（tab）時觸發，可用於監聽 tabBar 點擊事件。相關問題請參見 tabBar 常見問題。

程式碼範例

onTabItemTap 程式碼範例如下：

//.js
Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

tabBar 常見問題

功能支援類問題

• Q：tabBar 頁面是否支援帶參數跳轉？

  A：支援。

• Q：如何監聽 tabBar 點擊事件？

  A：在小程式頁面中用 onTabItemTap 即可監聽 tabBar 點擊事件。

• Q：tabBar 的 icon 表徵圖是否支援 svg 格式？

  A：不支援 svg 格式，只支援 png/jpeg/jpg/gif 圖片格式。

• Q：如何設定 tab 的樣式？

  A：可以在 JSON 檔案中直接設定樣式（程式碼範例如下所示），或者調用 my.setTabBarStyle API 進行設定。

  "tabBar": {
    "textColor": "#404040",
    "selectedColor": "#108ee9",
    "backgroundColor": "#F5F5F9"
  }

請求異常類問題

• Q：切換 tabBar 時報錯“Cannot read property ‘getCurrentPages’ of undefined”，如何處理？ A：tabBar 路徑錯誤導致，請檢查 tabBar 路徑。

• Q：跳轉頁面後，為何不顯示 tabBar？

  A：通過頁面跳轉（my.navigateTo）或者頁面重新導向（my.redirectTo）所到達的頁面，不會顯示底部的 tab 欄。另外，tabBar 的第一個頁面必須是首頁。

• Q：tabBar 頁面不支援帶參數跳轉嗎？

  A：tabBar 頁面目前不支援帶參數跳轉，建議跳轉傳參使用緩衝或者全域變數。

• Q：小程式進入 tabBar 頁面，如何擷取上一級頁面路徑？

  A：在進入頁面的時候將當前頁面路徑存入全域，在切換 tabBar 頁面的時候拿全域的地址屬性即可擷取上一級頁面路徑。

• Q：在 IDE 中調試，為何 tabBar 切換時 onshow、onload 生命週期函數不執行？

  A：tabBar 切換需要在真機上測試，IDE 中調試時不觸發。