小程式中預設設定了tabbar元件，但是有時候需要我們自定義的tabbar元件去完成更多的功能，例如繫結一些自定義的屬性和方法。

自定義tabbar也就是使用我們定義的元件去替換系統預設的tabbar。

建立元件

tabbar是一個元件，同時它和平常使用view，text元件是一樣的，通過在前端頁面中使用該標籤，就能展示出對應的樣式。自定義元件的第一步就是定義好這個元件的樣子

定義元件

建立一個元件資料夾，寫入樣式 wxml，wxss以及js內容，為了方便管理多個自定義的元件，使用這樣的檔案目錄

components/
    tabbar/
        tabbar.js
        tabbar.wxml
        tabbar.json
        tabbar.wxss
    元件2
 
/
    元件3/

tabbar.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>

  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
  
    <block wx:if="{{item.pagePath}}"
 
><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </block>

    <block wx:else>
      <cover-view class
 
="publish" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </block>
  </cover-view>
</cover-view>

tabbar.js

Component({
  /* 該元件可以擁有的屬性，例如預設有class，id等屬性，這裡定義一個selected屬性。在不同的頁面使用時候，指定該不同的值即可實現不同的選中狀態 <tabbar selected={{1}} ></tabbar>*/
  properties: {
    selected: {
      type: Number,
      value: 0
    }
  },

  /* 元件的初始資料   */
  data: {           // 該data 中的資料
    color: "#7A7E83",
    selectedColor: "#b4282d",
    list: [{
        "pagePath": "/pages/index/index",
        "text": "首頁",
        "iconPath": "/static/images/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "/static/images/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "text": "釋出"
      },
      {
        "pagePath": "/pages/home/home",
        "text": "我的",
        "iconPath": "/static/images/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "/static/images/tabbar/ic_menu_me_pressed.png"
      }
    ]
  },
  /**  元件的方法列表，該元件上定義的事件函式都會觸發這個列表中的方法   */
  methods: {
    switchTab(e) {
      if (userinfo) {wx.switchTab({ url })}
      else { }
    }
  }
})

由於一個tabbar會有多個標籤，這個在data中定義這些按鈕的一個列表，儲存各個按鈕的屬性值

可以通過在tabbar的的標籤上繫結方法，這樣點選標籤一個標籤時候將會執行這個對應的事件函式，而這些事件函式都在methods中定義了， 例如上述switchTab方法，在點選一個標籤時候觸發

tabbar.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}


.publish{
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx !important;
  background-color:aquamarine;
  border-radius: 50%;
}

使用元件

由於我們本次定義的是一個tabbar元件，當我們開啟該功能後，系統會自動為我們建立一個tabbar並顯示，在使用自定義的tabbar之前，需要禁用這個預設的tabbar。在app.json檔案中將tabbar中設定"custom": true,

{
  "pages": [
    "pages/index/index",   // index頁面路徑
  ],
  "window": {              // 頂部
    "backgroundTextStyle": "dark",
    "navigationBarTitleText": "標題",
    "enablePullDownRefresh": true
  },
  "tabBar": {              // tabbar 
    "custom": true,        // 設定為true, 禁用了預設的選項
    "backgroundColor": "#fafafa",
    "borderStyle": "white",
    "color": "#666",
    "selectedColor": "#b4282d",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "static/images/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/images/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "訊息",
        "iconPath": "static/images/tabbar/ic_menu_shopping_nor.png",
        "selectedIconPath": "static/images/tabbar/ic_menu_shopping_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/images/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/images/tabbar/ic_menu_me_pressed.png"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置資訊將用於小程式位置介面的效果展示"
    }
  },
  "debug": true,
  "sitemapLocation": "sitemap.json"
}

上面的操作只是定義了一個元件，而這個元件我們並沒有去使用它，使用它的方式和標籤的使用方式是相同的，例如將其命名為tb，在頁面中<tb></tb>即使用。

當一個頁面中需要使用該元件，就需要提前匯入，併為其標籤命名，然後使用即可

index.json

// 匯入到頁面
{
  "usingComponents": {         // 自定義元件列表
    "tabbar":"/components/tabbar/tabbar"    //  wxml使用時的元件名：元件路徑
  },
}

// index.wxml 
// 在頁面中使用///////////////
<tabbar selected={{1}}> </tabbar>   // selected 自定義的一個屬性

在index這個頁面中匯入了tabbar元件，併名為tabbar，這樣在前端中使用 <tabbar></tabbar> 即可

總結

1. 建立compoment，定義一個元件的樣式和邏輯處理資訊，包括properties 和 methods資訊。

2. 在app.json中開啟tabbar，但是設定custom為true，標識使用自定義tabbar。

3. 在頁面的json檔案中匯入這個元件，並命名，然後即可在wxml頁面中使用。