微信小程式底部想要有一個漂亮的導航欄目，不知道怎麼製作，於是百度找到了本篇文章，分享給大家。

好了 小程式的頭部標題 設定好了，我們來說說底部導航欄是如何實現的。

我們先來看個效果圖

這裡，我們添加了三個導航圖示，因為我們有三個頁面，微信小程式最多能加5個。

那他們是怎麼出現怎麼著色的呢？兩步就搞定！

1. 圖標準備

我們進入該網站，滑鼠滑到一個喜歡的圖示上面  點選下方的 下載按鈕

在彈出框中 選擇了 倆個不同顏色的 圖示  選擇64px大小即可，我選擇的是png  然後下載下來 起上別名 

將上述起好名字的圖示 儲存到 小程式 專案目錄中 新建立的 images 資料夾中，準備工作就做好了

2. 更改配置檔案

我們找到專案根目錄中的配置檔案 app.json 加入如下配置資訊

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle":"white",
    "list": [{
      "selectedIconPath": "images/111.png",
      "iconPath": "images/11.png",
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "selectedIconPath": "images/221.png",
      "iconPath": "images/22.png",
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }, {
      "selectedIconPath": "images/331.png",
      "iconPath": "images/33.png",
      "pagePath": "pages/test/test",
      "text": "開心測試"
    }]
  },
 

tabBar  指底部的 導航配置屬性

color  未選擇時 底部導航文字的顏色

selectedColor 選擇時 底部導航文字的顏色

borderStyle  底部導航邊框的樣色（注意 這裡如果沒有寫入樣式 會導致 導航框上邊框會出現預設的淺灰色線條）

list   導航配置陣列

selectedIconPath 選中時 圖示路徑

iconPath 未選擇時 圖示路徑

pagePath 頁面訪問地址

text  導航圖示下方文字

如果要改變更詳細的樣式 請參看

更多微信小程式教程請掃描二維碼關注：H5開發者社群

好了，儲存 編譯  就可以看到上面的效果了。