微信小程序實戰 動態控制底邊tabbar數量

微信小程序

需求

當進行用戶驗證的時候，如果用戶是作者，則需要在底邊欄位 tabbar 添加 "寫作" tab。如果不是作者，則底邊欄位tabbar維持不變。如果角色為"作者"的用戶註銷，則底邊欄位tabbar移除tab “寫作”。

需求

微信小程序原生tabbar

對於這個需求，我們首先看一下微信小程序原生tabbar能不能實現。原生tabbar定義在app.json中，以數組形式保存。

<code>"tabBar": {
    "color": "#000000",
    "selectedColor": "#0060FF",
    "list": [
      {
        "pagePath": "xxx",
        "text": "目錄",
        "iconPath": "./xxx.png",
        "selectedIconPath": "./xxxblue.png"
      },
      {
        "pagePath": "xxx",
        "text": "閱讀",
        "iconPath": "./xxx.png",
        "selectedIconPath": "./xxx.png"
      },
      {
        "pagePath": "xxx",
        "text": "寫作",
        "iconPath": "./xxx.png",
        "selectedIconPath": "./xxx.png"
      },
      {
        "pagePath": "xxx",
        "text": "我",
        "iconPath": "./xxx.png",
        "selectedIconPath": "./xxx.png"
      }
    ]
  }/<code>

如果在app.json中一旦定義了，就無法作修改。微信小程序並不提供API去動態修改tabbar。也就是說這種情況下，用戶進入小程序後會一直看到有4個tab。

所以使用原生tabbar不做修改這條路是走不通了。

定製tabbar

好在小程序提供了定製tabbar的功能，整個過程略微有點繁瑣。具體需要首先在app.json中聲明tabbar是定製化的，並且創建tabbar組件，在每個使用tabbar的頁面引入組件。這中間就涉及tabbar的index傳值的問題，用戶到底點擊了哪個tabbar，點擊以後需要做哪些操作，代碼寫在哪裡？

1. app.json配置信息

在app.json的tabBar模塊中寫入"customer":true，表明tabBar是定製的。

<code>"tabBar": {
    "custom": true,
    "color": "#000000",/<code>

將所有的tab信息都加入到tabBar的list模塊中。

2. 創建tabBar組件，可以在根目錄下進行創建。

<code>custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss/<code>

3. 寫入custom-tab-bar代碼

代碼具體可以參考微信小程序的擴展能力文檔，裡面有一節是關於Tabbar的，微信提供了相關代碼。直接拷貝代碼到custom-tab-bar中即可。

在該組件的properties中，主要定義了3個元素。其中list即為app.json中定義的tabbarlist。current是當前選定的tabbar的index,相當於list數組的下標。如果當前有4個tabbar，用戶選擇了第2個，那麼current就為1.

<code>properties: {
              extClass: {
                type: String,
                value: ''
              },
              list: {
                type: Array,
                value: []
              },
              current: {
                type: Number,
                value: 0
              }
            },/<code>

4. 在頁面引入custom-tab-bar組件

對於每一個需要使用tabbar的頁面來講，都是需要引入tabbar這個組件的。否則，當顯示頁面時，底部的tabbar就不會出現。

在頁面的json文件中，引入custom-tab-bar

<code>"usingComponents": {
    "mp-tabbar": "../../custom-tab-bar/index"
  }/<code>

在頁面的wxml文件中，引入tabbar。這裡要注意的是兩個參數，一個是list，一個是current。list是tabbar

<code>/<code>

頁面的js文件中，需要定義上述的tabbarlist和current所對應的tabIndex。

如果在訪問該頁面後判斷出用戶是作者，那麼可以通過操作tabbarlist來修改tabbar。

實現上述的需求，首先需要定義寫作標籤，然後將寫作標籤這個對象添加到tabbarlist數組中，再將tabIndex作相應修改。

<code>//定義寫作標籤 tab
let writeTab = {
  "text": "寫作",
  "iconPath": "../../../images/icons/write.png",
  "selectedIconPath": "../../../images/icons/writeblue.png",
  "path": './newPoem'
}
//將寫作標籤插入到tabbarlist數組
tabbarlist.splice(2,0,writeTab)
//設定數據，控制頁面顯示
this.setData({
  tabIndex: 3,
  tabbarlist: tabbarlist
})/<code>

到這裡，一個tab就在小程序的tabbar中添加好了。

如果需要移除某個tab，還是對tabbarlist這個數組進行操作，刪除數組中對應元素即可。

用戶點擊tab時，事件在哪裡處理？

在組件custom-tab-bar對應的方法中處理

<code>tabChange: function tabChange(e) {
  var index = e.currentTarget.dataset.index;
  ... ...
}/<code>

這裡的tabChange就是在頁面引入組件custom-tab-bar中通過bind-change引入的。

在組件中可以處理並且進行標籤tab的跳轉，如果邏輯複雜，需要在頁面中操作，也可以通過emit事件，並且在頁面中進行處理。

tabbarlist數據存放在哪裡

可以通過app的globalData進行存放，這樣模塊，頁面都可以快速獲取該信息。

希望這篇文章可以幫助朋友們對微信小程序tabbar定製有所瞭解，有問題歡迎留言討論。