zl程序教程

您现在的位置是:首页 >  APP

当前栏目

uniapp 中的 tabBar 配置

2023-02-19 12:20:15 时间

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 的菜单列表