uni-app的底部菜單的設置


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":""
}
]
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM