自定義tabBar

自定義tabBar可以讓開發者更加靈活地設定tabBar樣式，以滿足更多個性化的場景。

在自定義tabBar模式下

• 為了保證低版本相容以及區分哪些頁面是tab頁，tabBar的相關配置項需完整聲明，但這些欄位不會作用於自定義tabBar的渲染。

• 此時需要開發者提供一個自定義組件來渲染tabBar，所有tabBar的樣式都由該自定義組件渲染，推薦用fixed在底部的 cover-view + cover-image組件渲染樣式，以保證tabBar層級相對較高。

• 與tabBar樣式相關的接口，如 wx.setTabBarItem 等將失效。

• 每個tab頁下的自定義tabBar組件實例是不同的，可通過自定義組件下的getTabBar接口，獲取當前頁面的自定義tabBar組件實例

TIP

如需實現tab選中態，要在當前頁面下，通過getTabBar接口獲取組件實例，並調用setData更新選中態，可參攷底部的代碼示例。

使用流程

配置資訊

• 在app.json中的tabBar項指定custom欄位，同時其餘tabBar相關配置也補充完整
• 所有tab頁的json裏需聲明usingComponents項，也可以在app.json全域開啟。

代碼示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "Component"
    }, {
      "pagePath": "page/API/index",
      "text": "API"
    }]
  },
  "usingComponents": {}
}

添加tabBar代碼文件

在代碼根目錄下添加入口文件：

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

編寫tabBar代碼

用自定義組件的管道編寫即可，該自定義組件完全接管tabBar的渲染，另外，自定義組件新增getTabBar接口，可獲取當前頁面下的自定義tabBar組件實例。

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})