docs(Tabbar): add demo and docs (#2493)

example/pages/tabbar/index.js

@@ -7,6 +7,7 @@ Page({
     active3: 0,
     active4: 0,
     active5: 0,
+    active6: 0,
     icon: {
       normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
       active: 'https://img.yzcdn.cn/vant/user-active.png'
@@ -16,5 +17,11 @@ Page({
   onChange(event) {
     const { key } = event.currentTarget.dataset;
     this.setData({ [key]: event.detail });
+  },
+
+  handleChange(event) {
+    const { key } = event.currentTarget.dataset;
+    this.setData({ [key]: event.detail });
+    wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
   }
 });

example/pages/tabbar/index.wxml

@@ -87,3 +87,19 @@
     <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
   </van-tabbar>
 </demo-block>
+
+
+<demo-block title="切换标签事件">
+  <van-tabbar
+    active="{{ active6 }}"
+    data-key="active6"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="handleChange"
+  >
+    <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
+    <van-tabbar-item icon="search">标签2</van-tabbar-item>
+    <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
+  </van-tabbar>
+</demo-block>

packages/tabbar/README.md

@@ -139,6 +139,36 @@ Page({
 });
 ```
 
+
+### 切换标签事件
+
+```html
+<van-tabbar
+  active="{{ active }}"
+  bind:change="onChange"
+>
+  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
+  <van-tabbar-item icon="search">标签2</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onClick(event) {
+    wx.showToast({
+      title: `点击标签 ${event.detail + 1}`,
+      icon: 'none'
+    });
+  }
+});
+```
+
+
 ### 结合自定义 tabBar
 
 请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/FjLU4mmp7r9s)