微信小程序--代碼編寫--Tabbar配置

實現靜態的小程序Demo

{
  "pages":[
    "pages/index/index",
    "pages/join/join",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0f0",
    "navigationBarTitleText": "這是第一個測試小程序Demo",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "selectedColor": "#00f",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "images/home.jpg",
      "selectedIconPath": "images/home1.jpg"
    },
    { 
      "pagePath": "pages/join/join",
      "text": "加入",
      "iconPath": "images/join_p.jpg",
      "selectedIconPath": "images/join_n.jpg"
    }]
  }
}

 代碼分析：

13行：

 "tabBar":

tabBar

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

Tip：

1. 當設置 position 為 top 時，將不會顯示 icon
2. tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

 

 

 

 

調試結果如下：