微信小程式實作底部導航欄目示例

微信小程式支援底部導航欄配置，app.json檔案來對微信小程式進行全局配置，決定頁面檔案的路徑、視窗表現、設定網絡逾時時間、設定多 tab 等

效果圖

• 圖示可以自己找，可以用阿裡的圖示庫，下載下傳之後放到對應的images目錄，沒有目錄自己建立一個：

• 找到項目根目錄中的配置檔案 app.json 加入下面配置資訊

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/icon/index.png",
        "iconPath": "images/icon/index1.png",
        "pagePath": "pages/welcome/welcome",
        "text": "首頁"
      },
      {
        "selectedIconPath": "images/icon/phone.png",
        "iconPath": "images/icon/phone.png",
        "pagePath": "pages/redirect/redirect",
        "text": "公司電話"
      },
      {
        "selectedIconPath": "images/icon/localtion1.png",
        "iconPath": "images/icon/localtion.png",
        "pagePath": "pages/redirect/redirect",
        "text": "公司位置"
      }

    ]
  }
           

• 對應的屬性資訊

tabBar  指底部的 導航配置屬性
color  未選擇時 底部導航文字的顔色
selectedColor  選擇時 底部導航文字的顔色
borderStyle  底部導航邊框的樣色（注意 這裡如果沒有寫入樣式 會導緻 導航框上邊框會出現預設的淺灰色線條）
list   導航配置數組
selectedIconPath 選中時 圖示路徑
iconPath 未選擇時 圖示路徑
pagePath 頁面通路位址
text  導航圖示下方文字