微信小程序模板tabBar底部導航中文注解api
發(fā)布時間：2021-05-31 11:35 所屬欄目：小程序開發(fā)教程
微信小程序tabBar底部導航中文注解api，信小程序tabBar就是app底部的那個導航欄，可以放1-5導航鏈接，這里對微信小程序底部導航tabbar的中文解釋。
微信小程序tabBar是在全局app.json文件里面配置的。
小程序
|
{ "pages":[ "pages/index/index", "pages/detail/detail" ], "window":{ "navigationBarTitleText": "TabBar", "navigationBarBackgroundColor": "#F60", "navigationBarTextStyle": "white" }, //tabBar注意是B是大寫，有朋友提問運行時tab沒出現(xiàn)，檢查是不是這里手誤 "tabBar":{ //文檔指出color是必填項，其實可為空，不重寫color就是深灰，樣式更統(tǒng)一 "color": "#ddd", //同樣，文檔指出selectedColor是必填項，不過selectedColor有必要重寫，區(qū)分當前項與普通項 "selectedColor": "#3cc51f", //同樣，文檔指出color是必填項，其實可為空，不重寫backgroundColor就是淺灰，樣式更統(tǒng)一。 "backgroundColor": "#fff", //borderStyle，不寫默認就是黑，那就黑好了，white的話，會少一條分隔線，跟頁面混在一起了 "borderStyle":"black", "list":[{ "pagePath":"pages/index/index", //iconPath圖標是非必填，只是tab欄會變矮，自然selectedIconPath也可不寫 "iconPath":"image/icon_API.png", "selectedIconPath":"image/icon_API_HL.png", "text":"index" },{ "pagePath":"pages/detail/detail", "iconPath":"image/icon_component.png", "selectedIconPath":"image/icon_component_HL.png", "text":"detail" }] } } |
小程序
如果我們的小程序是一個多tab應用(客戶端窗口的底部有tab欄可以切換頁面)，那么我們可以通過tabBar配置項指定tab欄的表現(xiàn)，以及tab切換時顯示的對應頁面。
tabBar是一個數(shù)組，只能配置最少2個、最多5個tab，tab按數(shù)組的順序排序。
屬性說明：
| 屬性 | 類型 | 必填 | 默認值 | 描述 |
| 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 |
其中l(wèi)ist接受一個數(shù)組，數(shù)組中的每個項都是一個對象，其屬性值如下：
| 屬性 | 類型 | 必填 | 說明 |
| pagePath | String | 是 | 頁面路徑，必須在pages中先定義 |
| text | String | 是 | tab上按鈕文字 |
| iconPath | String | 是 | 圖片路徑，icon大小限制為40kb |
| selectedIconPath | String | 是 | 選中時的圖片路徑，icon大小限制為40kb |
