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