weapp tabbar

微信小程式自訂標籤欄（TabBar） 元件

支援無文字圖示、大圖示、懸浮圖示等。

原始碼下載：https://github.com/tanggaowei/weapp-tabbar

自訂標籤欄組件的程式碼在/commpents/tabbar目錄下，可以直接複製到其他專案使用。下面講述使用方法。

1、引用組件

在需要使用標籤欄的頁面的json 檔案中，使用usingComponents配置項目來引用標籤欄元件：

 {
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2、新增組件

現在wxml 檔案裡加入元件：

 <tabbar data="{{tabbar}}"></tabbar>

然後在js 檔案中定義元件的數據，如tabbar：

 Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

自訂標籤欄元件的資料格式和小程式原始標籤欄相同。這裡重點講述新屬性iconType和choose的使用。

iconType 總共有4個值： big 、 overflow 、 circle和shadow 。這四個值可以單獨使用，也可以同時使用。同時使用時用空格隔開（實際上會填入對應標籤的class 屬性中）。它們的作用如下：

• big使用大圖標，將圖標的寬度和高度設定為95rpx，和標籤欄的高相等；
• overflow將圖示上移，使其一部分在標籤欄外面顯示；
• circle將圖示的圖片截取為圓形；
• shadow給圖標加陰影。

choose 屬性共有兩個值：enable 和disable，預設為enable。當將其設為disable 時，點擊該標籤項目將不會改變標籤列的選取狀態，但仍會觸發change 事件。

3、監聽切換事件

使用bindchange屬性綁定監聽事件：

 <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

然後在Page() 實作監聽方法：

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

監聽方法會得到兩個資料： e.detail.key和e.detail.index 。其中e.detail.key 對應資料tabbar.list 陣列元素的key 值，不如上面的home 、tag、new、notebook 和me。 e.detail.index 對應該數組元素的序號，如0、1、2、3、4。

4、實踐方案

1）自訂元件

自訂元件類似頁面，擁有自己的wxml 模版和wxss 樣式，方便邏輯與視圖分離，比直接使用模板更好。下面是在index.wxml 中使用自訂元件進行切換的範例程式碼：

 <home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

其中<home> 、 <tag> 、 <notebook>和<me>是4 個自訂元件，分別實作各自的功能。

2）使用模板

使用模板也能實現切換效果，但邏輯程式碼可能要寫在同一個頁面。例如：

 <import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />

<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

3）導航和跳轉

可以在監聽方法中使用wx.navigateTo()或wx.redirectTo()介面切換頁面內容。例如：

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }