【微信小程序开发】tabBar的使用技巧

1、效果展示

2、原理：在app.json中配置tabBar属性

3、关键代码

"tabBar": {
    "color":"#666666",
    "selectedColor":"#06bd04",
    "list": [{
      "pagePath": "index",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/indexHL.png"
    },{
      "pagePath": "picDisplay",
      "text": "图片展示",
      "iconPath": "images/picDisplay.png",
      "selectedIconPath": "images/picDisplayHL.png"
    }]
  }

4、操作方法

• 新建一个项目，打开app.json文件，将关键代码复制到"window":{},后面，注意window的大括号前加逗号，如下图

• 配置tabBar属性值

 "tabBar": {
    //设置tabBar文字默认颜色
    "color":"#666666",
    //设置tabBar文字被选中是的颜色
    "selectedColor":"#06bd04",
    //tab列表，数组类型，改数组内至少要有两个但不大于5个的tab对象
    "list": [{
      //设置tab跳转页面链接
      "pagePath": "index",
      //设置tab上的文字
      "text": "首页",
      //设置tab上的默认图标
      "iconPath": "images/index.png",
      //设置tab被选中时的图标
      "selectedIconPath": "images/indexHL.png"
    },{
      "pagePath": "picDisplay",
      "text": "图片展示",
      "iconPath": "images/picDisplay.png",
      "selectedIconPath": "images/picDisplayHL.png"
    }]
  }

5、源代码获取方式

百度云链接：http://pan.baidu.com/s/1mh6CGIG

6、在使用tabBar过程中有遇到任何问题或者不明白的地方，欢迎添加我的微信号进行咨询，微信号：FutureJet　感谢您的支持！