微信小程序自定義 Tabbar

Taro 支持使用 React、Vue、或者小程序原生語法來編寫小程序自定義 TabBar 組件。

示例項目

• 微信小程序自定義 TabBar（React）

• 微信小程序自定義 TabBar（Vue3）

如何使用

配置方法和微信小程序相同，開發(fā)前請仔細閱讀 《微信小程序自定義 TabBar 文檔》。

配置信息

• 在 app.config 中按正常填寫 tabBar 項的相關(guān)配置（為了向下兼容），并把 tabBar 項的 custom 字段設(shè)置為 true。

• 所有作為 TabBar 頁面的 config 里需要聲明 usingComponents 項，也可以在 app.config 設(shè)置全局開啟。

示例：

app.config.js

export default {
  tabBar: {
    custom: true,
    color: '#000000',
    selectedColor: '#000000',
    backgroundColor: '#000000',
    list: [
      {
        pagePath: 'page/component/index',
        text: '組件',
      },
      {
        pagePath: 'page/API/index',
        text: '接口',
      },
    ],
  },
}

page/component/index.config.js

export default {  navigationBarTitleText: '組件頁',  usingComponents: {},}

page/API/index.config.js

export default {  navigationBarTitleText: '接口頁',  usingComponents: {},}

添加 custom-tab-bar

在 src 目錄下添加 custom-tab-bar 目錄，在里面書寫組件，支持 React、Vue 和原生寫法。

React：

├── config
├── src
|   └── custom-tab-bar
|       ├── index.json.js
|       └── index.jsx
└── package.json

Vue：

├── config
├── src
|   └── custom-tab-bar
|       ├── index.json.js
|       └── index.vue
└── package.json

原生寫法：

├── config
├── src
|   └── custom-tab-bar
|       ├── index.js
|       ├── index.json
|       ├── index.wxss
|       └── index.wxml
└── package.json

圖片資源引用

使用 React/Vue 開發(fā)自定義 TabBar 時，可以不使用 import 或 require 引用圖片資源（Taro 會自動根據(jù) TabBar 配置處理）。

如果使用了 import、require 或使用 background-image 時需要關(guān)注圖片是否被 url-loader 處理為 base64，base64 的圖片在 TabBar 中不能展示。

狀態(tài)管理

默認 TabBar 與自定義 TabBar 的最大不同點在于，默認 TabBar 在所有 TabBar 頁共享一個組件實例，而自定義 TabBar 在各個 TabBar 頁面初始化時都會創(chuàng)建一個新的組件實例。

也就是說各個 TabBar 頁內(nèi)的自定義 TabBar 組件實例的狀態(tài)是不共享的。因此對 TabBar 的狀態(tài)管理（例如 selected 選中態(tài)）則尤為重要。

對于不同寫法的自定義 TabBar，Taro 提供了不同的狀態(tài)管理方案：

1. 原生寫法

微信小程序原生寫法推薦使用 getTabBar 方法進行管理，如果你的自定義組件是使用原生寫法編寫的，那么可以參考小程序官方提供的示例。

唯一需要注意的是，在小程序原生頁面是調(diào)用 this.getTabBar，但 Taro 的頁面是 React/Vue 組件，this 指向的并不是原生頁面對象。因此需要先獲取原生頁面對象再進行調(diào)用：

// 頁面 onShow 時Taro.getCurrentInstance().page.getTabBar()

2. React / Vue

React 和 Vue 推薦使用狀態(tài)管理工具（Redux、Vuex 等）對 TabBar 頁的狀態(tài)進行管理。優(yōu)點在于無須侵入各個 TabBar 頁面的代碼，邏輯可以歸集在 TabBar 組件中。

如果開發(fā)者不希望使用狀態(tài)管理工具，Taro 提供了 Taro.getTabBar API 以獲取自定義 TabBar 組件（React/Vue 組件），然后開發(fā)者可以調(diào)用它上面的方法去更新 TabBar 組件的狀態(tài)。

// 頁面 onShow 時const pageObj = Taro.getCurrentInstance().pageconst tabbar = Taro.getTabBar(pageObj)

示例項目 中提供了兩個例子，React 版本的例子展示了如何使用 Taro.getTabBar 管理狀態(tài)，Vue3 版本的例子則展示了如何使用狀態(tài)管理工具來管理狀態(tài)。

組件配置項

自定義 TabBar 組件使用小程序的 Component 構(gòu)造器構(gòu)造，開發(fā)者在處理樣式隔離等問題時可以需要對 Component 進行配置。這時開發(fā)者可以給 React/Vue 編寫的自定義組件這些配置項屬性，Taro 會把它們放置到 Component 構(gòu)造對象上，目前支持：options、externalClasses、behaviors。

例子：

• React

• Vue

示例代碼

// Class Component
class CustomTabBar extends Component {
  static options = {
    addGlobalClass: true,
  }
}

// Functional Component
function CustomTabBar() {}
CustomTabBar.options = {
  addGlobalClass: true,
}

常見問題

閃爍問題

第一次加載 TabBar 頁時 TabBar 會閃爍

自定義 TabBar 在各個 TabBar 頁面初始化時都會創(chuàng)建一個新的組件實例導(dǎo)致?？梢缘轿⑿判〕绦蜷_發(fā)者社區(qū)尋找相關(guān)解決方案。

切換 Tab 時圖片閃爍

盡量使用本地圖片或 iconfont。文章來源地址http://www.zghlxwxcb.cn/news/detail-488126.html