wx TabBar使用案例-CFANZ编程社区

1 先建立一个images文件夹存放图标，个位数.png表示未选中的状态，双位数表示选中的状态：
在这里插入图片描述
2 在app.json里面新建三个page页面:

3 在app.json里面配置tabBar：

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "首页",
        "iconPath": "/pages/images/1.png",
        "selectedIconPath": "/pages/images/11.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "index页面",
        "iconPath": "/pages/images/2.png",
        "selectedIconPath": "/pages/images/22.png"

      },
      {
        "pagePath": "pages/test/test",
        "text": "test页面",
        "iconPath": "/pages/images/3.png",
        "selectedIconPath": "/pages/images/33.png"

      }
    ]
  },

4 效果如图：
在这里插入图片描述

在这里插入图片描述