微信小程序tabBar的开发设置

配置tabBar

1.打开app.json配置文件和 pages,window平级，新增tabBar节点

2.节点中，新增数组这个数组中存放的是每个tab项的配置对象

3.在list数组中，每新增一个tab项的配对象,对象包括的属性如下

             1.pagePath指定当前tab对应的页面路径  【必填】

             2.text 指定当前tab上按钮的文字   【必填】

             3.iconPath 指定当前tab未选中时候的图片路径   【选填】

             4.selectedIconPath 指定当前tab被选中后高亮的图片路径   【选填】

app.json文件中的配置

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/tabs/home.png",
      "selectedIconPath": "images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "images/tabs/message.png",
      "selectedIconPath": "images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "images/tabs/contact.png",
      "selectedIconPath": "images/tabs/contact-active.png"
    }

注意

在app.josn中pages中的三个页面路径需要放在前面，否则渲染不到

结果如下：