uni-app的底部菜單欄的設置
菜單的設置是在項目中的pages.json中進行配置
是使用“tabBar”中進行頁面底部菜單欄的設置,設置包括 文字,圖標(選中圖標或者是未選中),顏色,背景色,跳轉地址,鏈接。。。
例如:(設置顏色,背景色,選中顏色,邊框色)
"color":"#bbb",
"selectedColor":"#515151",
"borderStyle":"black",
"backgroundColor":"#fff",
但是如果是設置多個菜單的時候,我們是需要進行包裹,采用list的方式,包裹每個菜單的配置
例如:
{
// 跳轉路徑
"pagePath":"pages/index/index",
// 菜單文字
"text":"首頁",
// 未選中時候的圖標顏色
"iconPath":"",
//選中時候的圖標顏色
"selectedIconPath":""
},
完整的底部菜單配置(3個頁面===》首頁,搜索,我的)
"tabBar":{
"color":"#bbb",
"selectedColor":"#515151",
"borderStyle":"black",
"backgroundColor":"#fff",
"list":[
{
// 跳轉路徑
"pagePath":"pages/index/index",
// 菜單文字
"text":"首頁",
// 未選中時候的圖標顏色
"iconPath":"",
//選中時候的圖標顏色
"selectedIconPath":""
},
{
// 跳轉路徑
"pagePath":"pages/search/search",
// 菜單文字
"text":"搜索",
// 未選中時候的圖標顏色
"iconPath":"",
//選中時候的圖標顏色
"selectedIconPath":""
},
{
// 跳轉路徑
"pagePath":"pages/me/me",
// 菜單文字
"text":"我的",
// 未選中時候的圖標顏色
"iconPath":"",
//選中時候的圖標顏色
"selectedIconPath":""
}
]
}