微信小程序 自定義tabBar

為了讓商家更靈活地設(shè)置小程序的樣式，我們推薦使用微信小程序的自定義tabBar功能。下面將會(huì)介紹這個(gè)功能的使用流程，以及需要考慮的一些重要事項(xiàng)。

1. 配置信息

在app.json文件中，您需要指定tabBar項(xiàng)的custom字段，并完整聲明其余tabBar相關(guān)配置，以保證低版本兼容及正確渲染。另外，您需要在所有tab頁(yè)的json里聲明usingComponents項(xiàng)，或者在app.json全局開啟。

以下是一個(gè)示例：

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

2. 添加tabBar代碼文件

為了讓自定義tabBar正常工作，您需要添加如下四個(gè)文件:

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

3. 編寫tabBar代碼

您可以通過自定義組件的方式來編寫tabBar的代碼。在自定義模式下，所有tabBar的樣式都由該自定義組件渲染。另外，您可以通過自定義組件下的getTabBar接口獲取當(dāng)前頁(yè)面的自定義tabBar組件實(shí)例。

注意：如果需要實(shí)現(xiàn)tab選中態(tài)，在當(dāng)前頁(yè)面下，通過getTabBar接口獲取組件實(shí)例，并調(diào)用setData更新選中態(tài)。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>