小程序底部自定義tabBar

   一、最簡單底部導航欄
   在 app.json 內配置(限制：菜單欄最多5個,樣式、圖片不好個性化設置)

 "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/assets/tabBar/icon_component.png",
        "selectedIconPath": "/assets/tabBar/icon_component_HL.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/contact/index",
        "iconPath": "/assets/tabBar/icon_API.png",
        "selectedIconPath": "/assets/tabBar/icon_API_HL.png",
        "text": "聯繫客服"
      }
    ]
  }

二、自定義底部導航欄

1、在 app.json 內配置 (custom：最低適配版本2.5.0)

"tabBar": {
   "custom": true,    // 是否啓用自定義底部導航欄
   ..........         // 省略部分代碼同上app.json的配置,雖然配置後並不生效，但是不能省
},

"usingComponents": {  // 在 app.json 內開啓全局配置
   "v-tabBar": "custom-tab-bar/index"
}

2、自定義 tabBar 組件   (文件夾名必須爲custom-tab-bar，必須和pages在同一級目錄；文件名必須爲 index 命名)

custom-tab-bar 代碼請參考：自定義 tabBar

3、在 pages 的 xxx.js 新增 onShow 方法

onShow: function() {
  if(typeof this.getTabBar === 'function' && this.getTabBar()){
    this.getTabBar().setData({selected: 1});
  }
}

參考：微信小程序tabBar

          微信小程序自定義tabbar