微信小程序tabBar的使用，導航欄實例

微信小程序的導航欄，也就是標題欄的格式是規定好的，不可以改動。同樣，小程序提供的Tab欄也是規定好的格式，不過可以修改其屬性。

下面附上使用方法：

比如，如果希望在APP的首頁設置tabbar,則在app.json裏添加如下代碼：

{
  "pages":[
    "pages/index/index",
    "pages/components/mine/mine"
  ],
  "window":{
    "backgroundColor":"#f4f4f4",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FF5722",
    "navigationBarTitleText": "測試",
    "navigationBarTextStyle":"#FFFFFF"
  },
  "tabBar": {
    "color": "#959394",  //文字默認顏色
    "selectedColor": "#959394",//文字被選中時的顏色
    "backgroundColor": "#f0f0f0",//背景色
    "borderStyle": "white",//TAB欄邊框顏色
    "list": [
      {
        "pagePath": "pages/index/index", //導航頁面
        "iconPath": "pages/images/home_b.png",//默認圖片路徑
        "selectedIconPath": "pages/images/home.png",//被選中時的圖片路徑
        "text": "首頁"
      },
      {
        "pagePath": "pages/components/mine/mine",
        "iconPath": "pages/images/mine_b.png",
        "selectedIconPath": "pages/images/mine.png",
        "text": "幫助"
      }
    ]
  }
}

注：每個page都可以添加tabBar,子頁面的會覆蓋app.json的內容。

如果希望點擊時容易識別，建議“iconPath”和'selectedIconPath"這張圖片不同。

體驗自然語言查詢小程序可以用微信掃下面的頭像，

或者直接下載代碼：

微信小程序Demo

 技術交流羣：