From 4210edae6da24cbc7f98edb68f14194146f7749a Mon Sep 17 00:00:00 2001
From: Dottieworks <daejonglin@gmail.com>
Date: Mon, 9 Dec 2019 13:57:39 +0800
Subject: [PATCH] docs(Tabbar): add demo and docs (#2493)

---
 example/pages/tabbar/index.js   |  7 +++++++
 example/pages/tabbar/index.wxml | 16 ++++++++++++++++
 packages/tabbar/README.md       | 30 ++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+)

diff --git a/example/pages/tabbar/index.js b/example/pages/tabbar/index.js
index 8eaf3706..f3ca71db 100644
--- a/example/pages/tabbar/index.js
+++ b/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' });
   }
 });
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index 4a1dac9c..bd4ddc6e 100644
--- a/example/pages/tabbar/index.wxml
+++ b/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>
diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md
index edb0c4ab..5b387c52 100644
--- a/packages/tabbar/README.md
+++ b/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)