微信小程序官方文档链接
配置 tabbar 要在 app.json 里面配置
{
"pages": [
"pages/index/main",
"pages/classify/main",
"pages/cart/main",
"pages/me/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "FleaMarket",
"navigationBarTextStyle": "black"
},
"usingComponents": {
"van-button": "vant-weapp/dist/button/index",
"van-icon": "vant-weapp/dist/icon/index",
"van-search": "vant-weapp/dist/search/index"
},
"tabBar": {
"color": "#999",
"backgroundColor": "#fff",
"selectedColor": "#333",
"borderStyle": "white",
"list": [
{
"text": "首页",
"pagePath": "pages/index/main",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/home-selected.png"
},
{
"text": "首页",
"pagePath": "pages/classify/main",
"iconPath": "static/images/classtify.png",
"selectedIconPath": "static/images/classtufy-selected.png"
},
{
"text": "首页",
"pagePath": "pages/cart/main",
"iconPath": "static/images/cart.png",
"selectedIconPath": "static/images/cart-selected.png"
},
{
"text": "首页",
"pagePath": "pages/me/main",
"iconPath": "static/images/me.png",
"selectedIconPath": "static/images/me-selected.png"
}
],
"position": "bottom"
}
}
长这个样子,当然我把字删除了。
这些小图标可以去 iconfont 的图标库,把图标当成图片下载下来
登录 iconfont 图标库,选好自己想要的图标之后
点击下载
就可以下载了。
这个还可以改变颜色,这样就可以实现点击之后变换不同的颜色
点击编辑图标
点击这些颜色,就可以变换不同的颜色了。