微信小程式底部自定義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,    // 是否啟用自定義底部導航欄
   "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": "聯系客服"
      }
    ]
},

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

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

custom-tab-bar 代碼請參考：微信小程式api-自定義tabBar

　備注： list中的pagePath一定要寫絕對路徑/pages開頭

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

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

參考：微信小程式自定義tabbar

          uni-app适配自定義tabBar

說明： 微信小程式自帶 tabBar 可以在 <web-view> 标簽上顯示； 自定義 tabBar 無法在<web-view> 标簽上顯示【如果将 <view>标簽改成<cover-view>标簽,則可以在<web-view> 标簽上顯示，但是tabBar會出現頁面加載時無法固定顯示在底部的問題】