微信小程序tabbar字体如何加粗恶变大,图标如何颜色看的清楚
时间: 2023-06-27 19:06:23 浏览: 3738
微信小程序中,可以通过设置 `tabBar` 的样式来实现字体加粗、变大,以及图标颜色更加明显的效果。
1. 字体加粗、变大
可以在 `app.json` 文件中的 `tabBar` 字段中设置 `selectedFontSize` 和 `selectedFontWeight` 属性来实现字体加粗、变大的效果。
```json
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/mine/mine",
"text": "我的"
}],
"selectedFontSize": 16,
"selectedFontWeight": "bold"
}
```
2. 图标颜色加深
可以在 `app.wxss` 文件中设置 `tabBar` 中图标的颜色。例如:
```css
/* 选中的tabBar图标颜色为红色 */
.tabbar-icon-active {
color: #ff0000;
}
```
在 `wxml` 文件中,需要设置对应图标的类名:
```html
<view class="tabbar-item">
<image class="tabbar-icon {{selected ? 'tabbar-icon-active' : ''}}" src="{{selected ? selectedIconPath : iconPath}}"></image>
<text class="tabbar-text {{selected ? 'tabbar-text-active' : ''}}">{{text}}</text>
</view>
```
阅读全文