diff --git a/docs/examples-docs/zh-CN/tab.md b/docs/examples-docs/zh-CN/tab.md
index 3ca6131af..f10d38f1e 100644
--- a/docs/examples-docs/zh-CN/tab.md
+++ b/docs/examples-docs/zh-CN/tab.md
@@ -47,7 +47,7 @@ export default {
 };
 </script>
 
-## Tab 标签
+## Tab 标签页
 
 ### 使用指南
 ``` javascript
diff --git a/docs/examples-docs/zh-CN/tabbar.md b/docs/examples-docs/zh-CN/tabbar.md
new file mode 100644
index 000000000..22a32b8ad
--- /dev/null
+++ b/docs/examples-docs/zh-CN/tabbar.md
@@ -0,0 +1,110 @@
+## Tabbar 标签栏
+
+<style>
+.demo-tabbar {
+  .van-tabbar {
+    position: relative;
+
+    &-item {
+      cursor: pointer;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+      active2: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    }
+  }
+}
+</script>
+
+### 使用指南
+``` javascript
+import { Tabbar, TabbarItem } from 'vant';
+
+Vue.component(Tabbar.name, Tabbar);
+Vue.component(TabbarItem.name, TabbarItem);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="shop">标签</van-tabbar-item>
+  <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
+  <van-tabbar-item icon="records">标签</van-tabbar-item>
+  <van-tabbar-item icon="gold-coin">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+```
+:::
+
+#### 自定义图标
+通过 icon slot 自定义图标
+
+:::demo 自定义图标
+```html
+<van-tabbar v-model="active2">
+  <van-tabbar-item icon="shop">
+    <span>自定义</span>
+    <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+  </van-tabbar-item>
+  <van-tabbar-item icon="chat">标签</van-tabbar-item>
+  <van-tabbar-item icon="records">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active2: 0,
+      icon: {
+        normal: '//img.yzcdn.cn/1.png',
+        active: '//img.yzcdn.cn/2.png'
+      }
+    }
+  }
+}
+```
+:::
+
+### Tabbar API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中标签的索引 | `Number`  | - | - |
+
+### Tabbar Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| change | 切换标签时触发 | active: 当前选中标签 |
+
+### TabbarItem API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
+| dot | 是否显示小红点 | `Boolean` | - | - |
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index ed205e30a..382792506 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -121,7 +121,11 @@ module.exports = {
               },
               {
                 "path": "/tab",
-                "title": "Tab - 标签"
+                "title": "Tab - 标签页"
+              },
+              {
+                "path": "/tabbar",
+                "title": "Tabbar - 标签栏"
               },
               {
                 "path": "/tag",
diff --git a/packages/index.js b/packages/index.js
index c6d551ad6..e0ec4d901 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -50,6 +50,8 @@ import SwipeItem from './swipe-item';
 import Switch from './switch';
 import SwitchCell from './switch-cell';
 import Tab from './tab';
+import Tabbar from './tabbar';
+import TabbarItem from './tabbar-item';
 import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
@@ -108,6 +110,8 @@ const components = [
   Switch,
   SwitchCell,
   Tab,
+  Tabbar,
+  TabbarItem,
   Tabs,
   Tag,
   TreeSelect,
@@ -182,6 +186,8 @@ export {
   Switch,
   SwitchCell,
   Tab,
+  Tabbar,
+  TabbarItem,
   Tabs,
   Tag,
   Toast,
diff --git a/packages/swipe-item/index.vue b/packages/swipe-item/index.vue
index d960e7ece..3cc80f0bd 100644
--- a/packages/swipe-item/index.vue
+++ b/packages/swipe-item/index.vue
@@ -8,14 +8,9 @@
 export default {
   name: 'van-swipe-item',
 
-  beforeCreate() {
-    this.$parent.swipes.push(this);
-  },
-
   data() {
     return {
-      offset: 0,
-      index: this.$parent.swipes.indexOf(this)
+      offset: 0
     };
   },
 
@@ -28,8 +23,12 @@ export default {
     }
   },
 
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  },
+
   destroyed() {
-    this.$parent.swipes.splice(this.index, 1);
+    this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
   }
 };
 </script>
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
new file mode 100644
index 000000000..0e82852a9
--- /dev/null
+++ b/packages/tabbar-item/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div :class="['van-tabbar-item', { 'van-tabbar-item--active': active }]" @click="onClick">
+    <div :class="['van-tabbar-item__icon', { 'van-tabbar-item__icon-dot': dot }]">
+      <slot name="icon">
+        <van-icon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <div class="van-tabbar-item__text">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+export default {
+  name: 'van-tabbar-item',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    icon: String,
+    dot: Boolean
+  },
+
+  data() {
+    return {
+      active: false
+    };
+  },
+
+  beforeCreate() {
+    this.$parent.items.push(this);
+  },
+
+  destroyed() {
+    this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
+  },
+
+  methods: {
+    onClick() {
+      this.$parent.onChange(this.$parent.items.indexOf(this));
+    }
+  }
+};
+</script>
diff --git a/packages/tabbar/index.vue b/packages/tabbar/index.vue
new file mode 100644
index 000000000..833d8d9fc
--- /dev/null
+++ b/packages/tabbar/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div :class="['van-tabbar', 'van-hairline--top-bottom', { 'van-tabbar--fixed': fixed }]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-tabbar',
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  props: {
+    value: Number,
+    fixed: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    items() {
+      this.setActiveItem();
+    },
+    value() {
+      this.setActiveItem();
+    }
+  },
+
+  methods: {
+    setActiveItem() {
+      this.items.forEach((item, index) => {
+        item.active = index === this.value;
+      });
+    },
+    onChange(active) {
+      this.$emit('input', active);
+      this.$emit('change', active);
+    }
+  }
+};
+</script>
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 266d2779d..f9e94648f 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -22,6 +22,7 @@
 @import './steps.css';
 @import './tag.css';
 @import './tab.css';
+@import './tabbar.css';
 @import './image-preview.css';
 @import './stepper.css';
 @import './progress.css';
diff --git a/packages/vant-css/src/tabbar.css b/packages/vant-css/src/tabbar.css
new file mode 100644
index 000000000..cbfab2b49
--- /dev/null
+++ b/packages/vant-css/src/tabbar.css
@@ -0,0 +1,50 @@
+@import './common/var.css';
+
+.van-tabbar {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  background-color: #fff;
+
+  &--fixed {
+    left: 0;
+    bottom: 0;
+    position: fixed;
+  }
+
+  &-item {
+    flex: 1;
+    color: #666;
+    display: flex;
+    line-height: 1;
+    font-size: 12px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    &__icon {
+      font-size: 18px;
+      margin-bottom: 5px;
+      position: relative;
+
+      &-dot {
+        &::after {
+          width: 8px;
+          height: 8px;
+          content: ' ';
+          position: absolute;
+          border-radius: 100%;
+          background-color: $red;
+        }
+      }
+
+      img {
+        height: 18px;
+      }
+    }
+
+    &--active {
+      color: $blue;
+    }
+  }
+}
diff --git a/test/unit/components/tabbar.vue b/test/unit/components/tabbar.vue
new file mode 100644
index 000000000..9b91bec79
--- /dev/null
+++ b/test/unit/components/tabbar.vue
@@ -0,0 +1,40 @@
+<template>
+  <van-tabbar v-model="active" @change="onChange">
+    <van-tabbar-item icon="shop">
+      <span>自定义</span>
+      <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
+    </van-tabbar-item>
+    <van-tabbar-item icon="chat">标签</van-tabbar-item>
+    <van-tabbar-item icon="chat">标签</van-tabbar-item>
+    <van-tabbar-item icon="records">标签</van-tabbar-item>
+  </van-tabbar>
+</template>
+
+<script>
+import Tabbar from 'packages/tabbar';
+import TabbarItem from 'packages/tabbar-item';
+
+export default {
+  components: {
+    [Tabbar.name]: Tabbar,
+    [TabbarItem.name]: TabbarItem
+  },
+
+  data() {
+    return {
+      active: 0,
+      changeRecord: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    };
+  },
+
+  methods: {
+    onChange(val) {
+      this.changeRecord = val;
+    }
+  }
+};
+</script>
diff --git a/test/unit/specs/tabbar.spec.js b/test/unit/specs/tabbar.spec.js
new file mode 100644
index 000000000..86add5d3f
--- /dev/null
+++ b/test/unit/specs/tabbar.spec.js
@@ -0,0 +1,23 @@
+import TabbarExample from '../components/tabbar';
+import { mount } from 'avoriaz';
+
+describe('Progress', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('Tabbar with four items', (done) => {
+    wrapper = mount(TabbarExample);
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.van-tabbar-item').length).to.equal(4);
+
+      wrapper.find('.van-tabbar-item')[3].element.click();
+      expect(wrapper.vm.active).to.equal(3);
+      expect(wrapper.vm.changeRecord).to.equal(3);
+      done();
+    });
+  });
+});