微信小程式如何設定底部選單欄（tab欄）
阿新 • • 發佈：2018-12-13
tabBar
如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
| 屬性 | 說明 |
|---|---|
| color | tab 上的文字預設顏色 |
| selectedColor | tab 上的文字選中時的顏色 |
| backgroundColor | tab 的背景色 |
| borderStyle | tabbar上邊框的顏色， 僅支援 blackwhite 預設是bottom black |
| list | tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab |
| position | tabBar的位置，僅支援 bottom / top 預設是bottom |
其中 list 接受一個數組，只能配置最少2個、最多5個 tab。tab 按陣列的順序排序，每個項都是一個物件，其屬性值如下：
| 屬性 | 說明 |
|---|---|
| pagePath | 頁面路徑，必須在 pages 中先定義（也就是說必須要先有這一個頁面） |
| text | tab 上按鈕文字 |
| iconPath | 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px。 當 postion 為 top 時，不顯示 icon。 |
| selectedIconPath | 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px。 當 postiontop 時，不顯示 icon。 |
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/movie/movie",
"pages/userinfo/userinfo",
"pages/navigateTo/navigateTo"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我的小程式",
"navigationBarTextStyle": "black",
"navigationStyle": "default"
},
"tabBar": {
"selectedColor": "green",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/index.png",
"selectedIconPath": "images/indexf2.png"
},
{
"pagePath": "pages/movie/movie",
"text": "電影",
"iconPath": "images/movie.png",
"selectedIconPath": "images/movief.png"
},
{
"pagePath": "pages/logs/logs",
"text": "圖片",
"iconPath": "images/image.png",
"selectedIconPath": "images/imagef.png"
},
{
"pagePath": "pages/userinfo/userinfo",
"text": "個人中心",
"iconPath": "images/center.png",
"selectedIconPath": "images/centerf.png"
}
]
}
}微信公眾平臺的詳細講解地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html