微信小程式界面開發-底部導航欄

一、例子（代碼）

在app.json檔案中

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "pages/index/images/首頁.png",
        "selectedIconPath": "pages/index/images/首頁.png"
      },
      {
        "pagePath": "pages/user",
        "text": "我的",
        "iconPath": "pages/index/images/我的.png",
        "selectedIconPath": "pages/index/images/我的.png"
      },
      {
        "pagePath": "pages/message",
        "text": "資訊",
        "iconPath": "pages/index/images/message.png",
        "selectedIconPath": "pages/index/images/message.png"
      }
    ]
  }
           

分析：

tabBar是導航欄，預設在底部，List是它的一個屬性，同時，它自己也有四個屬性，如上。

1. pagePath是頁面路徑，後面對應你要跳轉到的頁面（必填）
2. text是文本資訊，後面對應你的提示資訊，一般與所跳轉的頁面對應（必填）
3. iconPath是圖像位址，後面對應的你導航欄所對應的圖示位址（選填）

4. selectedIconPath是點選導航欄後你的圖像位址，後面對應相應的位址（選填）

   二、效果

   

   想要了解更多請點選進入官網

   （參考資料微信開發者文檔）