要在小程序中添加小图标,可以按照以下步骤操作:
1. 准备图标素材。建议使用24px * 24px的图标,在png或者svg格式下都可以。
2. 在小程序开发工具中的项目目录下找到images文件夹,并把图标素材放入该文件夹。
3. 在app.json文件中配置页面的tabBar选项,包括tabBar的背景颜色、选中态颜色、未选中态颜色、位置等信息。
例如,如下代码是用于在app.json中添加一个tabBar的图标和文字:
```
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "images/cart.png",
"selectedIconPath": "images/cart-active.png"
}
]
}
```
其中,list数组中每个元素分别表示tabBar的一个页面,包括页面路径(pagePath)、页面名称(text)、未选中图标(iconPath)和选中图标(selectedIconPath)。
4. 如果要在tabBar中显示角标(如购物车商品数量),可以通过设置badge选项实现。例如,如下代码是用于在tabBar中显示购物车商品数量:
```
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "images/cart.png",
"selectedIconPath": "images/cart-active.png",
"badge": "2"
}
]
}
```
其中,badge选项表示在tabBar图标上显示的角标内容。
以上就是在小程序中添加小图标的步骤。需要注意的是,为了保证小程序的视觉效果,建议选择简洁、清晰、易于识别的图标,并合理配置tabBar样式,以便方便用户使用和操作。