快捷導(dǎo)航

微信小程序自定義tabBar的踩坑實踐記錄

更新時間：2020年11月06日 10:06:37 作者：江不知

這篇文章主要給大家介紹了關(guān)于微信小程序自定義tabBar的踩坑實踐記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

我使用 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 中我們定義相關(guān)數(shù)據(jù)：

active：當(dāng)前被點擊 tab 的索引
list：tab 列表

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

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

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: {
 // 標(biāo)簽切換
 onChange: function (event) {
  this.setData({ active: event.detail })
  wx.switchTab({
  url: this.data.list[event.detail].pagePath,
  })
 }
 }
})

index.json

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

{
 "component": true
}

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

{
 "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 標(biāo)簽欄，詳見代碼，不再贅述。

<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：設(shè)為 true，表示使用自定義組件
- list：tab 頁列表，在列表中的頁面將被設(shè)置為 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":"關(guān)于我",
    "iconPath":"",
    "selectedIconPath":""
   }
  ]
 }
}

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

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

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

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

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

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

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

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

踩坑

getTabBar() 方法缺失

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

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

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

報錯內(nèi)容如下：