微信小程式快速設定底部導航欄

效果圖

下面直接上代碼吧

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

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "assets/shouye1.png",
        "iconPath": "assets/shouye.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "selectedIconPath": "assets/fenlei1.png",
        "iconPath": "assets/fenlei.png",
        "pagePath": "pages/index/index",
        "text": "分類"
      },
      {
        "selectedIconPath": "assets/gouwuche1.png",
        "iconPath": "assets/gouwuche.png",
        "pagePath": "pages/index/index",
        "text": "購物車"
      },
      {
        "selectedIconPath": "assets/wode1.png",
        "iconPath": "assets/wode.png",
        "pagePath": "pages/index/index",
        "text": "我的"
      }
    ]
  }
           

儲存 編譯就會出現效果圖的效果了

2：下面給你們解釋一下每個屬性的意思：

tabBar 指底部的 導航配置屬性

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

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

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

list 導航配置數組

selectedIconPath 選中時 圖示路徑

iconPath 未選擇時 圖示路徑

pagePath 頁面通路位址

3：注意圖檔的路徑不要寫錯了！！！

給你們參考一下我寫的

圖示小提示：想要底部導航欄圖示的話可以去阿裡矢量圖官方網站去找

下載下傳位址：https://www.iconfont.cn/