小程序设置tabbar图标的大小
时间: 2023-06-25 20:06:09 浏览: 169
小程序设置 tabbar 图标大小可以通过 CSS 样式来实现。需要在 `app.wxss` 文件中定义全局样式,然后在每个页面的 `.json` 文件中引用即可。
以下是一个示例代码:
```css
/* app.wxss */
.tabbar {
height: 50px;
}
.tabbar-icon {
width: 24px;
height: 24px;
}
```
```json
// index.json
{
"navigationBarTitleText": "首页",
"usingComponents": {
"custom-tab-bar": "/components/tab-bar/index"
},
"style": "tabbar",
"tabBar": {
"color": "#999",
"selectedColor": "#007aff",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/tabbar/home.png",
"selectedIconPath": "/images/tabbar/home_selected.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/images/tabbar/my.png",
"selectedIconPath": "/images/tabbar/my_selected.png"
}
]
}
}
```
在上述代码中,我们定义了 `.tabbar` 和 `.tabbar-icon` 两个样式,其中 `.tabbar` 设置了 tabbar 的高度,`.tabbar-icon` 设置了图标的宽度和高度。在每个页面的 `.json` 文件中,我们将 `style` 属性设置为 `tabbar`,这样就会应用 `app.wxss` 中定义的样式。在 `tabBar.list` 中,我们设置了每个 tab 的图标路径,这些图标会应用 `.tabbar-icon` 样式。
阅读全文