uni-app中底部tabbar选中背景色为蓝色
时间: 2024-04-06 22:25:14 浏览: 310
uniapp小程序tabbar图标
可以通过在 pages.json 中配置 tabBar 的 backgroundColor 和 selectedColor 来设置底部 tabbar 的选中背景色为蓝色。其中,backgroundColor 为底部 tabbar 的背景色,selectedColor 为选中的 tab 的文字和图标颜色。具体配置如下:
```json
"tabBar": {
"color": "#999",
"selectedColor": "#007aff",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/tabbar/mine.png",
"selectedIconPath": "static/tabbar/mine-active.png"
}
]
}
```
以上配置将底部 tabbar 的选中背景色设置为蓝色(#007aff)。其中,list 数组中包含了两个 tab,分别为首页和我的,可以根据实际需求进行修改。每个 tab 包含了 pagePath、text、iconPath 和 selectedIconPath 四个属性,分别表示页面路径、文字、未选中图标路径和选中图标路径。
阅读全文