### tabBar
如果小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。
**Tip:**
1. 當設置 position 為 top 時,將不會顯示 icon
2. tabBar 中的 list 是一個數組,**只能配置最少2個、最多5個 tab**,tab 按數組的順序排序。
**屬性說明:**
| 屬性 | 類型 | 必填 | 默認值 | 描述 |
| --------------- | -------- | ---- | ------ | ---------------------------------- |
| color | HexColor | 是 | | tab 上的文字默認顏色 |
| selectedColor | HexColor | 是 | | tab 上的文字選中時的顏色 |
| backgroundColor | HexColor | 是 | | tab 的背景色 |
| borderStyle | String | 否 | black | tabbar上邊框的顏色, 僅支持 black/white |
| list | Array | 是 | | tab 的列表,詳見 list 屬性說明,最少2個、最多5個 tab |
| position | String | 否 | bottom | 可選值 bottom、top |
其中 list 接受一個數組,數組中的每個項都是一個對象,其屬性值如下:
| 屬性 | 類型 | 必填 | 說明 |
| ---------------- | ------ | ---- | ---------------------------------------- |
| pagePath | String | 是 | 頁面路徑,必須在 pages 中先定義 |
| text | String | 是 | tab 上按鈕文字 |
| iconPath | String | 否 | 圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,當 postion 為 top 時,此參數無效,不支持網絡圖片 |
| selectedIconPath | String | 否 | 選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px ,當 postion 為 top 時,此參數無效 |
如:
```json
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "res/img/home.png",
"selectedIconPath": "res/img/hover.jpg"
},
{
"pagePath": "pages/test/index",
"text": "測試",
"iconPath": "res/img/test.png",
"selectedIconPath": "res/img/hover.jpg"
}
],
"color": "#666666",
"selectedColor": "#0ffff0",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"position": "bottom"
}
}
```
:-: 
position: top 的情況,不能自定義圖標 :
:-: 
- 簡介
- 第一章 公眾號開發
- 使用微信JSSDK
- 接口權限配置
- 分享接口
- 隱藏按鈕項
- 微信支付
- 第二章 小程序開發
- 基礎知識
- 分包加載
- WXSS樣式表
- 配置
- app.json配置
- window
- tabBar
- page.json配置
- 邏輯層
- app.js
- 場景值
- page.js
- 初始化數據
- 生命周期函數
- 頁面相關事件處理函數
- 事件處理函數
- 頁面實例方法
- 路由
- 文件作用域
- 模塊化
- 視圖層
- 模板語法
- 列表渲染
- 條件渲染
- 模板
- 事件
- 引用
- WXS語法規范
- WXS數據類型
- WXS控制流程
- WXS基礎類庫
- 組件
- 視圖容器
- view
- scroll-view
- swiper
- movable-view
- cover-view
- 基礎組件
- icon
- text
- rich-text
- progress
- 表單組件
- button
- checkbox
- form
- input
- label
- picker
- picker-view
- radio
- slider
- switch
- textarea
- 導航組件
- navigator
- 媒體組件
- audio
- image
- video
- camera
- 地圖組件
- map
- 畫布組件
- canvas
- 開放能力
- web-view
- 自定義組件
- 組件模版和樣式
- Component
- 組件傳值
- 組件事件
- Behaviors
- 組件間關系
- 網絡請求
- wx.request
- 微信登錄
- 獲取 openid 和 unionid
- 獲取用戶信息
- 將 wx.request 封裝為 promise
- 上傳圖片接口封裝
- 數據存儲
- 存儲數據和讀取數據
- 獲取數據緩存信息
- 移除數據緩存
- 獲取用戶設置
- openSetting
- getSetting
- 第三章 小游戲開發
- 參考資料