微信小程序之tabbar配置

微信小程序官方文档链接

配置 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 图标库，选好自己想要的图标之后

点击下载
就可以下载了。
这个还可以改变颜色，这样就可以实现点击之后变换不同的颜色
点击编辑图标
点击这些颜色，就可以变换不同的颜色了。