uni-app的tabbar配置中怎么单独设置某个图标的大小
时间: 2024-02-01 21:16:24 浏览: 355
uniapp自定义tabbar图标样式
5星 · 资源好评率100%
在uni-app的tabbar配置中,可以通过以下步骤单独设置某个图标的大小:
1. 在`pages.json`或`globalStyle.json`中定义样式,例如:
```json
{
"style": {
"icon-size": "28px"
}
}
```
2. 在`tabBar`的`list`数组中,针对需要设置大小的图标,添加`iconPath`和`selectedIconPath`属性,并设置`iconSize`属性,例如:
```json
"tabBar": {
"color": "#999999",
"selectedColor": "#007aff",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/tabbar/home.png",
"selectedIconPath": "/static/tabbar/home-active.png",
"iconSize": "34px"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/static/tabbar/mine.png",
"selectedIconPath": "/static/tabbar/mine-active.png"
}
]
}
```
在上述代码中,`iconSize`属性设置为`34px`,只会对第一个tabbar图标生效,第二个图标大小仍然使用全局样式中定义的大小。
阅读全文