小程序开发教程（2：taBar导航栏）

taBar介绍

如果有多个tab应用需要切换，那么在开发过程中可以选择tabBar标签进行定义，作为最顶层app.JSON文件中的一个属性，开发者只需通过简单的定义，就可以实现在客户端窗口的底部显示tab栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下

其中根据官方对属性的定义如下：

开发实践：

为了达到上图展示的效果，笔者只需要在app.json中接入如下代码

"tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "image/wechat.png",
      "selectedIconPath": "image/wechatHL.png",
      "text": "逛逛校园"
    }, {
      "pagePath": "pages/logs/logs",
      "iconPath": "image/wechat.png",
      "selectedIconPath": "image/wechatHL.png",
      "text": "个人中心"
    },{
      "pagePath": "pages/logs/logs",
      "iconPath": "image/wechat.png",
      "selectedIconPath": "image/wechatHL.png",
      "text": "联系我们"
    }]
  }

遇到问题：

第一次接入时，笔者发现不管怎么刷新，更改都无法显示tab标签

解决方案：

通过重新查看代码发现，是笔者list中的第一项pagePath写错了，

后期进一步验证可发现，list中其他项的pagePath错误不会影响tab显示，一但第一个pagePath未填写或写错，整个tab将不会显示，并且其中的iconPath，selectedIconPath属性可以不填写（不建议这做，会影响界面美观）。