微信官方文檔對自定義 tabBar 的闡述較為潦草，在開發(fā)自定義 tabBar 過程中我踩了很多坑，因此在此處做個總結。

我使用 Vant Weapp 作為 UI 組件庫，下面以此組件庫為例。

定義 tabBar

創(chuàng)建自定義 tabBar 文件

創(chuàng)建一個與 /pages 的同級目錄，命名為  /custom-tab-bar，注意目錄層級與目錄命名問題，不可用其他名稱命名。
在 /custom-tab-bar 下創(chuàng)建四個文件：

index.js
index.json
index.wxml
index.wxss

index.js

在 index.js 中我們定義相關數(shù)據(jù)：

• active：當前被點擊 tab 的索引
• list：tab 列表

以及一個切換 tab 時觸發(fā)的方法：

function onChange(event)：標簽切換時觸發(fā)，修改 active 值，點亮被點擊的 tab 并進行頁面跳轉

Component({
 data: {
 // 選中的 tab 
 active: null,
 // 菜單列表
 list: [
  {
  pagePath: '/pages/subscriptions/subscriptions',
  text: '訂閱',
  name: 'subscriptions',
  icon: 'bullhorn-o'
  },
  {
  pagePath: '/pages/profile/profile',
  text: '我的',
  name: 'profile',
  icon: 'user-o'
  }
 ]
 },
 methods: {
 // 標簽切換
 onChange: function (event) {
  this.setData({ active: event.detail })
  wx.switchTab({
  url: this.data.list[event.detail].pagePath,
  })
 }
 }
})

index.json

在 index.json 中，將 component 參數(shù)值設為 true，代表這是一個自定義組件：

{
 "component": true
}

因為我使用了Vant Weapp 的 tabBar 標簽欄，所以還需引入額外組件：

{
 "component": true,
 "usingComponents": {
 "van-tabbar": "@vant/weapp/tabbar/index",
 "van-tabbar-item": "@vant/weapp/tabbar-item/index",
 "van-icon": "@vant/weapp/icon/index"
 }
}

index.wxml

在 index.wxml 中定義組件形態(tài)，我在此處使用Vant Weapp 的 tabBar 標簽欄，詳見代碼，不再贅述。

<van-tabbar active="{{ active }}" bind:change="onChange">
 <van-tabbar-item 
 wx:for="{{list}}" 
 wx:key="index"
 icon="{{item.icon}}" 
 data-path="{{item.pagePath}}">
 {{item.text}}
 </van-tabbar-item>
</van-tabbar>

配置 app.json

在 app.json 中配置如下參數(shù)：

• usingComponents：僅聲明即可
• tabBar：tabBar 組件的具體配置
  • custom：設為 true，表示使用自定義組件
  • list：tab 頁列表，在列表中的頁面將被設置為 tab 頁，自動加載 tabBar

{
 "usingComponents":{

 },
 "tabBar":{
  "custom":true,
  "color":"#000000",
  "selectedColor":"#000000",
  "backgroundColor":"#000000",
  "list":[
   {
    "pagePath":"pages/subscriptions/subscriptions",
    "text":"訂閱列表",
    "iconPath":"",
    "selectedIconPath":""
   },
   {
    "pagePath":"pages/profile/profile",
    "text":"關于我",
    "iconPath":"",
    "selectedIconPath":""
   }
  ]
 }
}

實現(xiàn) tabBar 選中態(tài)

根據(jù)微信官方文檔描述，每個 tab 頁面 tabBar 的實例是不同的：

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

顯而易見，每當切換 tab 頁時，我們都需要更新 tabBar 的選中態(tài)。關于選中態(tài)的實現(xiàn)，官方文檔描述如下：

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

我們可以在使用到 tabBar 的頁面中這樣實現(xiàn)：

Page({
 onShow: function () {
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({
  // 當前頁面的 tabBar 索引
  active: 1
  })
 }
 }
})

至此，一個自定義 tabBar 的實現(xiàn)已全部完成。

踩坑

getTabBar() 方法缺失

在實現(xiàn) tabBar 選中態(tài)時遇到 getTabBar() 方法缺失的問題。在小程序開發(fā)工具中跳轉到 getTabBar() 方法的定義，我們可以看到：

/**
 * 返回當前頁面的 custom-tab-bar 的組件實例
 *
 * 最低基礎庫版本：[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
 **/
getTabBar(): TrivialInstance

該方法的最低基礎版本庫為 2.6.2，我們修改 project.config.json 文件中的 libVersion 字段，升級到指定版本庫即可。
升級版本庫后 tabBar 組件報錯

報錯內容如下：

Component is not found in path "custom-tab-bar/index"

該原因是由于 tabBar 組件目錄放置錯誤導致的，需要注意以下幾點：

1. 目錄需與 /pages 同級
2. 目錄名稱是 custom-tab-bar
3. 目錄下所包含的文件名為 index.后綴
4. 在 app.json 配置中，tabBar 下的 custom 字段需設置為 true

getTabBar() 始終返回 null

依舊是目錄放置與文件命名問題，處理方法同上。

另外，不需要在 app.json 的 usingComponents 引入 tabBar 組件，如果你放置目錄與命名正確，小程序會自動引入。

參考文檔

• 小程序官方文檔：自定義 tabBar
• 官方自定義 tabbar 的顯示和隱藏
• 使用自定義 tabbar,在 tab 頁中使用 this.getTabBar() 一直返回 null，什么原因？
• getTabBar 無法調用 接口相關說明在哪里？

總結

到此這篇關于微信小程序自定義tabBar踩坑實踐記錄的文章就介紹到這了,更多相關微信小程序自定義tabBar踩坑內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！