From 05c0b4592bd0d8e6ee9cf1b4cb55a6b1fb47dcef Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 29 Oct 2019 20:18:31 +0800
Subject: [PATCH] docs(Tabbar): add some missing demos (#2218)

---
 example/pages/tabbar/index.js   |  8 +++++-
 example/pages/tabbar/index.wxml | 45 +++++++++++++++++++++++++++++++++
 packages/tabbar/README.md       | 18 ++++++-------
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/example/pages/tabbar/index.js b/example/pages/tabbar/index.js
index 57244fd7..8eaf3706 100644
--- a/example/pages/tabbar/index.js
+++ b/example/pages/tabbar/index.js
@@ -4,7 +4,13 @@ Page({
   data: {
     active: 0,
     active2: 'home',
-    active3: 0
+    active3: 0,
+    active4: 0,
+    active5: 0,
+    icon: {
+      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
+      active: 'https://img.yzcdn.cn/vant/user-active.png'
+    }
   },
 
   onChange(event) {
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index e9262b66..4a1dac9c 100644
--- a/example/pages/tabbar/index.wxml
+++ b/example/pages/tabbar/index.wxml
@@ -42,3 +42,48 @@
     <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
   </van-tabbar>
 </demo-block>
+
+<demo-block title="自定义图标">
+  <van-tabbar
+    active="{{ active4 }}"
+    data-key="active4"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
+    <van-tabbar-item info="3">
+      <image
+        slot="icon"
+        src="{{ icon.normal }}"
+        mode="aspectFit"
+        style="width: 30px; height: 18px;"
+      />
+      <image
+        slot="icon-active"
+        src="{{ icon.active }}"
+        mode="aspectFit"
+        style="width: 30px; height: 18px;"
+      />
+      自定义
+    </van-tabbar-item>
+    <van-tabbar-item icon="search">标签</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>
+
+<demo-block title="自定义颜色">
+  <van-tabbar
+    active="{{ active5 }}"
+    data-key="active5"
+    custom-class="tabbar"
+    active-color="#07c160"
+    inactive-color="#000"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
+    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="search">标签</van-tabbar-item>
+    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>
diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md
index 6cacbe76..643198d5 100644
--- a/packages/tabbar/README.md
+++ b/packages/tabbar/README.md
@@ -29,9 +29,9 @@ Page({
   data: {
     active: 0
   },
-  // event.detail 的值为当前选中项的索引
   onChange(event) {
-    console.log(event.detail);
+    // event.detail 的值为当前选中项的索引
+    this.setData({ active: event.detail });
   }
 });
 ```
@@ -55,7 +55,7 @@ Page({
     active: 'home'
   },
   onChange(event) {
-    console.log(event.detail);
+    this.setData({ active: event.detail });
   }
 });
 ```
@@ -82,11 +82,13 @@ Page({
       slot="icon"
       src="{{ icon.normal }}"
       mode="aspectFit"
+      style="width: 30px; height: 18px;"
     />
     <image
       slot="icon-active"
       src="{{ icon.active }}"
       mode="aspectFit"
+      style="width: 30px; height: 18px;"
     />
     自定义
   </van-tabbar-item>
@@ -100,13 +102,12 @@ Page({
   data: {
     active: 0,
     icon: {
-      normal: '//img.yzcdn.cn/icon-normal.png',
-      active: '//img.yzcdn.cn/icon-active.png'
+      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
+      active: 'https://img.yzcdn.cn/vant/user-active.png'
     }
   },
-
   onChange(event) {
-    console.log(event.detail);
+    this.setData({ active: event.detail });
   }
 });
 ```
@@ -132,9 +133,8 @@ Page({
   data: {
     active: 0
   },
-  // event.detail 的值为当前选中项的索引
   onChange(event) {
-    console.log(event.detail);
+    this.setData({ active: event.detail });
   }
 });
 ```