微信小程序設置底部菜單欄

微信小法式底部菜單欄的建立過程。

東西/原料

1
要建立底部菜單欄，起首建立好我們底部菜單欄需要跳轉的頁面，這里值演示2個，一個首頁，一個我的。
2
打開app.json頁面，在window下寫下面的代碼
"tabBar": {
"color": "#bfbfbf",
"selectedColor": "#d81e06",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "/images/m12.png",
"selectedIconPath": "/images/m11.png"
},
{
"pagePath": "pages/wode/wode",
"text": "我的",
"iconPath": "/images/m13.png",
"selectedIconPath": "/images/m14.png"
}
]
}
3
起首我們設置底部菜單點擊前和點擊后文字的顏色，最好和圖片一個顏色。
圖中紅色為選中前，綠色為選中后。
4
我們填寫一下點擊跳轉的路徑和選項的名字，
pagePath為點擊后跳轉的路徑，
text為這個選項的名字。
5
填寫點擊前的圖標和點擊后的圖標，這里我們每個選項用兩個顏色圖標，可以去找矢量圖，尺寸年夜約在64像素擺布。
iconPath為點擊前的圖標，
selectedIconPath為點擊后的圖標。
6
今朝菜單欄最多撐持5個選項，下面用兩張圖看一下完當作的結果。點擊之前是灰色的，點擊之后是紅色，跳轉到對應的頁面。