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