diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js
index 3fce2d04..3da705be 100644
--- a/example/pages/tab/index.js
+++ b/example/pages/tab/index.js
@@ -17,10 +17,9 @@ Page(Object.assign({}, Zan.Tab, {
         title: '待收货'
       }, {
         id: 'sign',
-        title: '已完成'
+        title: '已完成订单'
       }],
-      selectedId: 'all',
-      scroll: false
+      selectedId: 'all'
     },
     tab2: {
       list: [{
diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml
index b606274d..f760c266 100644
--- a/example/pages/tab/index.wxml
+++ b/example/pages/tab/index.wxml
@@ -5,12 +5,18 @@
   <view class="doc-title">TAB</view>
 
   <view style="margin: 20px 0">
-    <template is="zan-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
+    <template
+      is="zan-tab"
+      data="{{ ...tab1, componentId: 'tab1' }}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="zan-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
+    <template
+      is="zan-tab"
+      data="{{ ...tab2, componentId: 'tab2' }}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="zan-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
+    <template
+      is="zan-tab"
+      data="{{ ...tab3, componentId: 'tab3' }}"></template>
   </view>
 </view>
diff --git a/packages/helper/README.md b/packages/helper/README.md
index 07334276..5f54f3a1 100644
--- a/packages/helper/README.md
+++ b/packages/helper/README.md
@@ -1,3 +1,71 @@
 ## Helper 基础样式
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+直接在元素上增加指定 class 即可
+```html
+<view class="zan-pull-right">zan-pull-right: 往右靠</view>
+```
+
+具体可用类名如下：
+
+**字体大小**
+
+`zan-font-8` 文字以8像素大小展示
+
+`zan-font-10` 文字以10像素大小展示
+
+`zan-font-12` 文字以12像素大小展示
+
+`zan-font-14` 文字以14像素大小展示
+
+`zan-font-16` 文字以16像素大小展示
+
+`zan-font-18` 文字以18像素大小展示
+
+`zan-font-20` 文字以20像素大小展示
+
+`zan-font-22` 文字以22像素大小展示
+
+`zan-font-24` 文字以24像素大小展示
+
+`zan-font-30` 文字以30像素大小展示
+
+**字体颜色**
+
+`zan-c-red` 文字以红色展示
+
+`zan-c-gray` 文字以浅灰色展示
+
+`zan-c-gray-dark` 文字以灰色展示
+
+`zan-c-gray-darker` 文字以深灰色展示
+
+`zan-c-black` 文字以黑色展示
+
+`zan-c-blue` 文字以蓝色展示
+
+`zan-c-green` 文字以绿色展示
+
+**字体样式**
+
+`zan-pull-right` 文字往右靠
+
+`zan-text-deleted` 文字显示删除效果
+
+`zan-font-bold` 文字加粗显示
+
+**其他**
+
+`zan-arrow` 展示向右侧箭头，以 absolute 布局，需要在外层加上 relative 来定位
+
+`zan-ellipsis` 文字过长点点点显示
+
+`zan-ellipsis--l2` 文字过长点点点显示，最多显示两行
+
+`zan-ellipsis--l3` 文字过长点点点显示，最多显示三行
diff --git a/packages/tab/README.md b/packages/tab/README.md
index 19004985..948dd188 100644
--- a/packages/tab/README.md
+++ b/packages/tab/README.md
@@ -22,35 +22,37 @@ Page(Object.assign({}, Tab, {
 ### 代码演示
 在模板中使用 zan-tab 模板，并传入相应数据
 ```html
-<template is="zan-tab" data="{{ tab: tab1, componentId: 'tab1' }}"></template>
+<template is="zan-tab" data="{{ list, selectedId: '', componentId: 'tab1' }}"></template>
 ```
-tab 的数据格式如下
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| list | tab 列表 | Array | - | |
+| selectedId | 当前被选中 tab 项的 id | String | - | |
+| scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
+| componentId | 用于区分页面多个 tab 组件 | String | - | |
+
+
+tab 组件中，list 数据格式如下
 ```js
-{
-  // tab 数据列表
-  list: [{
-    // tab 项 id
-    id: 'all',
-    // tab 项展示文案
-    title: '全部'
-  }, {
-    id: 'topay',
-    title: '待付款'
-  }, {
-    id: 'tosend',
-    title: '待发货'
-  }, {
-    id: 'send',
-    title: '待收货'
-  }, {
-    id: 'sign',
-    title: '已完成'
-  }],
-  // 当前选中的 tab 项，以 tab 的 id 进行匹配
-  selectedId: 'all',
-  // 是否开启左右滑动类型的 tab
-  scroll: false
-}
+[{
+  // tab 项 id
+  id: 'all',
+  // tab 项展示文案
+  title: '全部'
+}, {
+  id: 'topay',
+  title: '待付款'
+}, {
+  id: 'tosend',
+  title: '待发货'
+}, {
+  id: 'send',
+  title: '待收货'
+}, {
+  id: 'sign',
+  title: '已完成'
+}]
 ```
 
 当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
diff --git a/packages/tab/index.pcss b/packages/tab/index.pcss
index 5b1e18e1..c0d492fa 100644
--- a/packages/tab/index.pcss
+++ b/packages/tab/index.pcss
@@ -16,19 +16,24 @@
 .zan-tab__item {
   flex: 1;
   display: inline-block;
-  text-align: center;
+  padding: 0 10px;
+  line-height: 0;
   box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
 }
 
 .zan-tab__title {
-  font-size: 14px;
   display: inline-block;
-  color: #666;
+  max-width: 100%;
   height: 44px;
   line-height: 44px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   box-sizing: border-box;
-  margin: 0 10px;
   word-break: keep-all;
+  font-size: 14px;
+  color: #666;
 }
 
 .zan-tab__item--selected .zan-tab__title {
@@ -43,6 +48,3 @@
 .zan-tab__bd--scroll .zan-tab__item {
   min-width: 80px;
 }
-.zan-tab__bd--scroll .zan-tab__text {
-  margin: 0 20px;
-}
diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml
index 628d1a60..6ece0e42 100644
--- a/packages/tab/index.wxml
+++ b/packages/tab/index.wxml
@@ -1,31 +1,37 @@
 <template name="zan-tab">
   <view class="zan-tab">
-      <block wx:if="{{tab.scroll}}">
-        <scroll-view
-          class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
-          scroll-x="true"
-          style="height: {{ tab.height ? tab.height + 'px' : 'auto' }}"
-        >
-          <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
-        </scroll-view>
-      </block>
-      <block wx:else>
-        <view class="zan-tab__bd {{fixed ? 'zan-tab__bd--fixed' : ''}}">
-          <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
-        </view>
-      </block>
+    <block wx:if="{{ tab.scroll || scroll }}">
+      <scroll-view
+        class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
+        scroll-x="true"
+        style="height: {{ tab.height || height ? ((tab.height || height) + 'px') : 'auto' }}"
+      >
+        <template
+          is="zan-tab-list"
+          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
+        </template>
+      </scroll-view>
+    </block>
+    <block wx:else>
+      <view class="zan-tab__bd {{ fixed ? 'zan-tab__bd--fixed' : '' }}">
+        <template
+          is="zan-tab-list"
+          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
+        </template>
+      </view>
+    </block>
   </view>
 </template>
 
 <template name="zan-tab-list">
   <view
-    wx:for="{{tab.list}}"
+    wx:for="{{ list }}"
     wx:key="id"
-    class="zan-tab__item {{tab.selectedId == item.id ? 'zan-tab__item--selected' : ''}}"
-    data-component-id="{{componentId}}"
-    data-item-id="{{item.id}}"
+    class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
+    data-component-id="{{ componentId }}"
+    data-item-id="{{ item.id }}"
     bindtap="_handleZanTabChange"
   >
-    <view class="zan-tab__title">{{item.title}}</view>
+    <view class="zan-tab__title">{{ item.title }}</view>
   </view>
 </template>