uniapp 中的 tabBar 配置

很酷的站长

发布于 2023-01-03 08:25:22

1.3K0

发布于 2023-01-03 08:25:22

文章被收录于专栏：站长的编程笔记站长的编程笔记

1. 前言

tabBar 配置：https://uniapp.dcloud.io/collocation/pages?id=tabbar

修改 page.json, 在文件中添加以下内容（tabBar 和 globalStyle同级）

2. 使用示例

"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabBar/home.png",
"selectedIconPath": "static/tabBar/homeSelected.png",
"text": "首页"
},
{
"pagePath": "pages/test/test",
"iconPath": "static/tabBar/my.png",
"selectedIconPath": "static/tabBar/mySelected.png",
"text": "我的"
}
]
}

属性	是否必填	描述
color	是	文字默认颜色（未选中时的颜色）
selectedColor	是	文字选中时的颜色
backgroundColor	是	tab 背景颜色
list	是	tab 的菜单列表