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/s/1mh6CGIG 6、在使用tabBar过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信号进行咨询,微信号:FutureJet 感谢您的支持!

更多推荐

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