微信小程序自定义标签栏（TabBar） 组件

支持无文字图标、大图标、悬浮图标等。

源码下载：https://github.com/tanggaowei/weapp-tabbar

自定义标签栏组件的代码在 /commpents/tabbar 目录下，可以直接复制到其他项目里使用。下面讲述使用方法。

1、引用组件

在需要使用标签栏的页面的 json 文件中，使用 usingComponents 配置项引用标签栏组件：

{
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2、添加组件

现在 wxml 文件里添加组件：

<tabbar data="{{tabbar}}"></tabbar>

然后在 js 文件中定义组件的数据，如 tabbar：

Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

自定义标签栏组件的数据格式和小程序原始标签栏相同。这里重点讲述新属性 iconType 和 choose 的使用。

iconType 一共有4个值：big、overflow、circle 和 shadow。这四个值可以单独使用，也可以同时使用。同时使用时用空格隔开（实际上会被填写到对应标签的 class 属性中）。它们的作用如下：

• big 使用大图标，将图标的宽和高设置为 95rpx，和标签栏的高相等；
• overflow 将图标上移，使其一部分在标签栏外面显示；
• circle 将图标的图片截取为圆形；
• shadow 给图标加阴影。

choose 属性一共有两个值：enable 和 disable，默认为 enable。当将其设置为 disable 时，点击该标签项将不会改变标签栏的选中状态，但仍然会触发 change 事件。

3、监听切换事件

使用 bindchange 属性绑定监听事件：

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

然后在 Page() 中实现监听方法：

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

监听方法会得到两个数据：e.detail.key 和 e.detail.index。其中 e.detail.key 对应数据 tabbar.list 数组元素的 key 值，不如上面的 home 、tag、new、notebook 和 me。e.detail.index 对应该数组元素的序号，如 0、1、2、3、4。

4、实践方案

1）自定义组件

自定义组件类似于页面，拥有自己的 wxml 模版和 wxss 样式，便于逻辑与视图分离，比直接使用模板要好。下面是在 index.wxml 中使用自定义组件进行切换的示例代码：

<home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

其中 <home>、<tag>、<notebook> 和 <me> 是 4 个自定义组件，分别实现各自的功能。

2）使用模板

使用模板也能实现切换效果，但是逻辑代码可能要写在同一个页面。例如：

<import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />

<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

3）导航和跳转

可以在监听方法中使用 wx.navigateTo() 或 wx.redirectTo() 接口切换页面内容。例如：

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }