微信小程序 - 底部栏（tabBar）

参考官网文档 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

 

app.json

{
  "pages": [
    "pages/index/index",
    "pages/little/little",
    "pages/message/message",
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Wechat",
    "navigationBarTextStyle": "black"
  },
  
  "tabBar": {
    "color": "#131616",
    "selectedColor": "#d4237a",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "pages/images/tar11.png",
        "selectedIconPath": "pages/images/tar1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/little/little",
        "iconPath": "pages/images/tar2.png",
        "selectedIconPath": "pages/images/tar22.png",
        "text": "微淘"
      },
      {
        "pagePath": "pages/message/message",
        "iconPath": "pages/images/tar3.png",
        "selectedIconPath": "pages/images/tar33.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "pages/images/tar4.png",
        "selectedIconPath": "pages/images/tar44.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "pages/images/tar5.png",
        "selectedIconPath": "pages/images/tar55.png",
        "text": "个人中心"
      }
    ]
  }
}

tabBar 参数

list接受数组 最少配置2个 最多配置5个 Tab  并且按数组的顺序排序，每个项都是一个对象，其属性值如下：