微信小程序TabBar

微信小程序TabBar教程

Tab 在小程序里面是一个常用的功能，它能够帮助用户快速的到某一个页面。在微信小程序里面，可以很方便的建立一个底部 TabBar。因为 tabBar 是全局的，每个页面都需要有一个这样的页脚或者页首。所以需要在 app.json 页面里面配置。它对应的官方文档 tarBar。

语法

tarBar 属性

属性	类型	描述
color	HexColor	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	tab 的背景色，仅支持十六进制颜色
borderStyle	string	tabbar 上边框的颜色， 仅支持 black / white
list	Array	tab 的列表，最少 2 个、最多 5 个 tab
position	string	tabBar 的位置，仅支持 bottom / top
custom	boolean	自定义 tabBar

list 属性

属性	类型	描述
pagePath	string	页面路径，必须在 pages 中先定义
text	string	tab 上按钮文字
iconPath	string	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

描述

tarbar 里面展示哪些数据，是 list 里面进行控制的。list 里面可以控制图片选中后的效果和没有选中的效果，里面也将对应的文字和图片进行控制。

案例

新建图片文件夹，存放 tarBar 需要用到的图片

我们在项目最外层，和 pages同层级新建目录 images，在里面加入图片，案例里面，我们在 tabBar 上面创建 4 个按钮。我们存放了被选中的效果图片和没有被选中的效果图片，所以需要 8 张图片。

打开 app.json 文件

在和 window 平级的地方创建一个 “tabBar” 属性代码。

代码如下：

"tabBar": {
    "list": [
      {
        "iconPath": "images/convenience_unselect.png",
        "selectedIconPath": "images/convenience_select.png",
        "text": "便民",
        "pagePath": "pages/index/index"
      }, {
        "iconPath": "images/circle_unselect.png",
        "selectedIconPath": "images/circle_select.png",
        "text": "圈子",
        "pagePath": "pages/index/index"
      }, {
        "iconPath": "images/complaints_unselect.png",
        "selectedIconPath": "images/complaints_select.png",
        "text": "吐槽",
        "pagePath": "pages/index/index"
      }, {
        "iconPath": "images/mine_unselect.png",
        "selectedIconPath": "images/mine_select.png",
        "text": "我的",
        "pagePath": "pages/index/index"
      }
    ]
  },

运行结果如下：

总结

tarBar 是全局性的，所以它需要在 app.json 里面修改，它可以放在页面的顶部，也可以存放在页面的底部。所以控制的地方在 list 里面。最多存放 5 个图标，最少放 2 个图标。