微信小程序的 tabbar

官方文档

微信小程序 tabbar 的配置也是在 app.json 中完成, 包括页面路径, tabbar 样式设置等

顺便安利一个 海量免费 icon 网站 FLATICON

例:

//页面路径
"pages": [
    "pages/shop/shop",
    "pages/shopping_cart/shopping_cart",
    "pages/custom_center/custom_center"
]
//样式设置
"tabBar":{
    "color": "#999999",
    "selectedColor": "#13b2ae",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/shop/shop",
        "text": "商场",
        "iconPath": "src/img/home.png",//tabbar 未选中时图标
        "selectedIconPath": "src/img/home-selected.png"//tabbar 选中时图标
      },
      {
        "pagePath": "pages/shopping_cart/shopping_cart",
        "text": "购物车",
        "iconPath": "src/img/menu.png",
        "selectedIconPath": "src/img/menu-selected.png"
      },
      {
        "pagePath": "pages/custom_center/custom_center",
        "text": "我",
        "iconPath": "src/img/user.png",
        "selectedIconPath": "src/img/user-selected.png"
      }
   	]
}