diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5693e666..86e6aa48 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Log
 
+## 0.6.13
+- [!] fixed[wxc-overlay](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/)problem on[wxc-tab-bar](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/)
+- [+] add wxc-swipe-action
+- [!] [!] Fix [wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) displaying style problem, add isHighlight attribute to control whether button is highlighted or not.
+
 ## 0.6.12
 - [!] Fixed set transparency issues [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/).
 - [!] Fixed set transparency issues [wxc-mask](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-mask/).
diff --git a/CHANGELOG_cn.md b/CHANGELOG_cn.md
index 21e215b5..8bd747c9 100644
--- a/CHANGELOG_cn.md
+++ b/CHANGELOG_cn.md
@@ -1,5 +1,10 @@
 # 升级日志
 
+## 0.6.13
+- [!] 修复[wxc-overlay](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/)在[wxc-tab-bar](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/)上使用问题
+- [+] 添加wxc-swipe-action侧滑组件
+- [!] 修复[wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) 设置display样式问题，添加isHighlight属性控制button是否高亮显示
+
 ## 0.6.12
 - [!] 修复 [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/) 设置透明度问题
 - [!] 修复 [wxc-mask](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-mask/) 设置透明度问题
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
index 1ca30a8c..df08cd9c 100644
--- a/docs/_coverpage.md
+++ b/docs/_coverpage.md
@@ -1,6 +1,6 @@
 <img src="https://img.alicdn.com/tfs/TB1kCs_er_I8KJjy1XaXXbsxpXa-419-495.png" width="146px">
 
-# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.12</span>
+# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.13</span>
 
 > <span style="line-height:1.8rem;font-weight:400;font-size:1.3rem">A rich interaction, lightweight, high performance UI library.<span>
 
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 18173b19..4dea1054 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -9,6 +9,7 @@
     - [wxc-popup](packages/wxc-popup/)
     - [wxc-result](packages/wxc-result/)
     - [wxc-slide-nav](packages/wxc-slide-nav/)
+    - [wxc-swipe-action](packages/wxc-swipe-action/)
 
 - Navigator
     - [wxc-minibar](packages/wxc-minibar/)
diff --git a/docs/_sidebar_cn.md b/docs/_sidebar_cn.md
index f5688b5d..4d1ddec5 100644
--- a/docs/_sidebar_cn.md
+++ b/docs/_sidebar_cn.md
@@ -9,6 +9,8 @@
     - [wxc-popup 弹层](cn/packages/wxc-popup/)
     - [wxc-result 结果页](cn/packages/wxc-result/)
     - [wxc-slide-nav 视窗增大](cn/packages/wxc-slide-nav/)
+    - [wxc-swipe-action 滑动操作 cell](cn/packages/wxc-swipe-action/)
+
 
 - 导航
     - [wxc-minibar 导航栏](cn/packages/wxc-minibar/)
diff --git a/example/swipe-action/index.js b/example/swipe-action/index.js
new file mode 100644
index 00000000..6191d836
--- /dev/null
+++ b/example/swipe-action/index.js
@@ -0,0 +1,4 @@
+import entry from './index.vue'
+
+entry.el = '#root'
+export default new Vue(entry)
diff --git a/example/swipe-action/index.vue b/example/swipe-action/index.vue
new file mode 100644
index 00000000..4ffefd71
--- /dev/null
+++ b/example/swipe-action/index.vue
@@ -0,0 +1,86 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
+<template>
+<div>
+  <scroller class="wxc-demo">
+    <title title="wxc-swipe-action"></title>
+    <category title="使用案例"></category>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+  </scroller>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from "../../index";
+const modal = weex.requireModule("modal");
+import Title from "../_mods/title.vue";
+import Category from "../_mods/category.vue";
+import { setTitle } from '../_mods/set-nav';
+
+export default {
+  components: {
+    Title,
+    Category,
+    WxcSwipeAction
+  },
+  data() {
+    return {
+      data: [
+        {
+          title: "点击右边按钮隐藏",
+          autoClose: true,
+          right: [
+            {
+              text: "置顶",
+              onPress: function() {
+                modal.toast({
+                  message: "置顶",
+                  duration: 0.3
+                });
+              }
+            },
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        },
+        {
+          title: "默认效果",
+          right: [
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        }
+      ]
+    };
+  },
+  created() {
+    setTitle("SwipeAction");
+  },
+  methods: {
+    onTest(node, i) {
+      modal.toast({
+        message: node.title,
+        duration: 0.3
+      });
+    }
+  }
+};
+</script>
+
diff --git a/index.js b/index.js
index 72009a4c..09f7c7c2 100644
--- a/index.js
+++ b/index.js
@@ -40,6 +40,7 @@ import WxcSlideNav from './packages/wxc-slide-nav';
 import WxcSliderBar from './packages/wxc-slider-bar';
 import WxcSpecialRichText from './packages/wxc-special-rich-text';
 import WxcStepper from './packages/wxc-stepper';
+import WxcSwipeAction from './packages/wxc-swipe-action';
 import WxcTabBar from './packages/wxc-tab-bar';
 import WxcTabPage from './packages/wxc-tab-page';
 import WxcTag from './packages/wxc-tag';
@@ -82,6 +83,7 @@ export {
   WxcSliderBar,
   WxcSpecialRichText,
   WxcStepper,
+  WxcSwipeAction,
   WxcTabBar,
   WxcTabPage,
   WxcTag
diff --git a/package.json b/package.json
index 532b9809..1db4c8c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weex-ui",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "A rich interaction, lightweight, high performance UI library based on Weex",
   "main": "index.js",
   "lib": "vue",
diff --git a/packages/wxc-button/README.md b/packages/wxc-button/README.md
index 00c92e87..7610c3f8 100644
--- a/packages/wxc-button/README.md
+++ b/packages/wxc-button/README.md
@@ -39,6 +39,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 | **`type`** | `String` | `N` | `red` | can be set to `white`/`red`/`yellow`/`blue`/`green` |
 | **`size`** | `String` | `N` | `full` | can be set to `full`/`big`/`medium`/`small` |
 | **`disabled`** | `Boolean` | `N` | `false` | set disabled（*1） |
+| **`isHighlight`** | `Boolean` | `N` | `false` | Whether to highlight |
 | **`btnStyle`** | `Object` | `N` | `{}` | custom style about button（*2） |
 | **`textStyle`** | `Object` | `N` | `{}` | custom style about text （*3） |
 
diff --git a/packages/wxc-button/README_cn.md b/packages/wxc-button/README_cn.md
index 49835293..3b473e9d 100644
--- a/packages/wxc-button/README_cn.md
+++ b/packages/wxc-button/README_cn.md
@@ -38,6 +38,7 @@
 | **`type`** | `String` | `N` | `red` | 类型：`white`/`red`/`yellow`/`blue`/`green` |
 | **`size`** | `String` | `N` | `full` | 类型：`full`/`big`/`medium`/`small` |
 | **`disabled`** | `Boolean` | `N` | `false` | 是否 disabled（注1） |
+| **`isHighlight`** | `Boolean` | `N` | `false` | 是否高亮显示 |
 | **`btnStyle`** | `Object` | `N` | `{}` | 按钮的样式对象（注2） |
 | **`textStyle`** | `Object` | `N` | `{}` | 文字的样式对象（注3） |
 
diff --git a/packages/wxc-button/index.vue b/packages/wxc-button/index.vue
index b0150a60..f9cb1dbd 100644
--- a/packages/wxc-button/index.vue
+++ b/packages/wxc-button/index.vue
@@ -2,7 +2,7 @@
 <!-- Created by Tw93 on 17/07/28. -->
 
 <template>
-  <div class="wxc-btn"
+  <div :class="['wxc-btn', isHighlight && !disabled && 'wxc-btn-highlight']"
        :style="mrBtnStyle"
        @click="onClicked"
        :accessible="true"
@@ -32,6 +32,10 @@
         type: Boolean,
         default: false
       },
+      isHighlight: {
+        type: Boolean,
+        default: false
+      },
       btnStyle: Object,
       textStyle: Object,
       disabledStyle: Object
@@ -81,7 +85,7 @@
     opacity: 1;
   }
 
-  .wxc-btn:active {
+  .wxc-btn-highlight:active {
     opacity: .8;
   }
 
diff --git a/packages/wxc-dialog/README.md b/packages/wxc-dialog/README.md
index b07c5b1d..3b666439 100644
--- a/packages/wxc-dialog/README.md
+++ b/packages/wxc-dialog/README.md
@@ -74,6 +74,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 |-------------|------------|--------|-----|-----|
 | title | `String` | `Y` | `-` | title (only transparent) |
 | content | `String` | `N` | `-`| content |
+| left | `Number` |`N`| `0` | move left distance  |
 | top | `Number` | `N` |`400` |  distance from the top of the screen |
 | single | `Boolean` | `N` |`false` |  whether is single button |
 | confirm-text | `String` | `N` |`确定` |  text of the primary button |
diff --git a/packages/wxc-dialog/README_cn.md b/packages/wxc-dialog/README_cn.md
index 10e9b2e9..3197a656 100644
--- a/packages/wxc-dialog/README_cn.md
+++ b/packages/wxc-dialog/README_cn.md
@@ -73,6 +73,7 @@
 | Prop | Type | Required | Default | Description |
 |-------------|------------|--------|-----|-----|
 | title | `String` | `Y` | `-` | 标题 |
+| left | `Number` |`N`| `0` | 向左移动距离  |
 | content | `String` | `N` | `-`| 内容说明描述 |
 | top | `Number` | `N` |`400` |  弹层距离顶部的高度 |
 | single | `Boolean` | `N` |`false` |  是否只有一个按钮（显示确认） |
diff --git a/packages/wxc-dialog/index.vue b/packages/wxc-dialog/index.vue
index f667810d..fa21e6a1 100644
--- a/packages/wxc-dialog/index.vue
+++ b/packages/wxc-dialog/index.vue
@@ -4,8 +4,8 @@
 
 <template>
   <div class="container">
-    <wxc-overlay v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
-    <div class="dialog-box" v-if="show" :style="{top:top+'px'}">
+    <wxc-overlay :left='left' v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
+    <div class="dialog-box" v-if="show" :style="{top:top+'px', left: ((isWeb ? left : 0) + 96) + 'px'}">
       <div class="dialog-content">
         <slot name="title">
           <text class="content-title">{{title}}</text>
@@ -118,6 +118,7 @@
 <script>
   import WxcOverlay from '../wxc-overlay'
   import { CHECKED, UN_CHECKED } from './type';
+  import Utils from '../utils';
 
   export default {
     components: { WxcOverlay },
@@ -169,11 +170,16 @@
       isChecked: {
         type: Boolean,
         default: false
+      },
+      left: {
+        type: Number,
+        default: 0
       }
     },
     data: () => ({
       noPromptIcon: UN_CHECKED,
-      pageHeight: 1334
+      pageHeight: 1334,
+      isWeb: Utils.env.isWeb()
     }),
     created () {
       const { env: { deviceHeight, deviceWidth } } = weex.config;
diff --git a/packages/wxc-overlay/README.md b/packages/wxc-overlay/README.md
index 98208be4..e3473f2c 100644
--- a/packages/wxc-overlay/README.md
+++ b/packages/wxc-overlay/README.md
@@ -50,6 +50,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 |-------------|------------|--------|-----|
 | show | `Boolean` |`Y`| `false` | whether to show  |
 | opacity | `Number` |`N`| `0.6` | opacity `0-1` |
+| left | `Number` |`N`| `0` | move left distance  |
 | has-animation | `Boolean` |`N`| `true` | whether to animate |
 | can-auto-close | `Boolean` |`N`| `true` | whether to can auto close  |
 | duration | `Number` | `300` |`N`| animation duration time |
diff --git a/packages/wxc-overlay/README_cn.md b/packages/wxc-overlay/README_cn.md
index 70bbb090..bdc28749 100644
--- a/packages/wxc-overlay/README_cn.md
+++ b/packages/wxc-overlay/README_cn.md
@@ -48,6 +48,7 @@
 | Prop | Type | Required | Default | Description |
 |-------------|------------|--------|-----|
 | show | `Boolean` |`Y`| `false` | 是否开启  |
+| left | `Number` |`N`| `0` | 向左移动距离  |
 | opacity | `Number` |`N`| `0.6` | 蒙层opacity度数0-1 |
 | has-animation | `Boolean` |`N`| `true` | 是否开启蒙层出现动画  |
 | can-auto-close | `Boolean` |`N`| `true` | 是否可以点击自动关闭  |
diff --git a/packages/wxc-overlay/index.vue b/packages/wxc-overlay/index.vue
index e01f8273..60659a0d 100644
--- a/packages/wxc-overlay/index.vue
+++ b/packages/wxc-overlay/index.vue
@@ -18,7 +18,6 @@
   .wxc-overlay {
     width: 750px;
     position: fixed;
-    left: 0;
     top: 0;
     bottom: 0;
     right: 0;
@@ -27,12 +26,18 @@
 
 <script>
   const animation = weex.requireModule('animation');
+  import Utils from '../utils';
+
   export default {
     props: {
       show: {
         type: Boolean,
         default: true
       },
+      left: {
+        default: Number,
+        default: 0
+      },
       hasAnimation: {
         type: Boolean,
         default: true
@@ -58,7 +63,8 @@
       overlayStyle () {
         return {
           opacity: this.hasAnimation ? 0 : 1,
-          backgroundColor: `rgba(0, 0, 0,${this.opacity})`
+          backgroundColor: `rgba(0, 0, 0,${this.opacity})`,
+          left: Utils.env.isWeb() ? this.left + 'px' : 0
         }
       },
       shouldShow () {
diff --git a/packages/wxc-swipe-action/README.md b/packages/wxc-swipe-action/README.md
new file mode 100644
index 00000000..84f2d0c6
--- /dev/null
+++ b/packages/wxc-swipe-action/README.md
@@ -0,0 +1,125 @@
+# wxc-swipe-action
+
+!> These rich interaction components are based on [BindingX](https://alibaba.github.io/bindingx/) feature. Make sure your app [install it](https://github.com/alibaba/bindingx#installation).
+
+### Rule
+- Only one row can be swiped at a time
+- Hide operations by clicking on the right button or by clicking on the list.
+
+## [Demo]
+<img src="http://cdn.emas-poc.com/material/weex/82xh6-9dnxz2.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
+
+## Code Example
+```vue
+<template>
+<div>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+  components: {
+    WxcSwipeAction
+  },
+  data() {
+    return {
+      data: [
+        {
+          title: "标题1",
+          right: [
+            {
+              text: "置顶",
+              onPress: function() {
+                modal.toast({
+                  message: "置顶",
+                  duration: 0.3
+                });
+              }
+            },
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        },
+        {
+          title: "标题2",
+          right: [
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        },
+        {
+          title: "标题3",
+          right: [
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        }
+      ]
+    };
+  },
+  
+  methods: {
+    onTest(node, i) {
+      modal.toast({
+        message: node.title,
+        duration: 0.3
+      });
+    }
+  }
+};
+</script>
+```
+
+### API
+|Prop|Type|Required|Default|Description|
+|-------------|------------|--------|-----|-----|
+|data|Array|Y|[]|list|
+
+### Data API
+|Prop|Description|Type|Default|
+|-------------|------------|--------|-----|
+|title|content|String|null|
+|right|Right button group|Array|null|
+|autoClose|Hide the button automatically after clicking the button|Boolean|false|
+
+### Button
+|Prop|Type|Description|
+|-------------|------------|--------|
+|text|String|copywriting|
+|style|Object|button style|
+|onPress|():void|click|
+
+### Event
+
+```
+// click
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-swipe-action/README_cn.md b/packages/wxc-swipe-action/README_cn.md
new file mode 100644
index 00000000..8b0019ef
--- /dev/null
+++ b/packages/wxc-swipe-action/README_cn.md
@@ -0,0 +1,125 @@
+# wxc-swipe-action
+
+!> 这个富交互体验组件依赖于 [BindingX](https://alibaba.github.io/bindingx/) 特性，使用前请确定你的App [是否安装](https://github.com/alibaba/bindingx#installation)
+
+### 规则
+- 一次只可滑动一行列表
+- 点击右边按钮或点击列表可隐藏操作。
+
+## [Demo]
+<img src="http://cdn.emas-poc.com/material/weex/82xh6-9dnxz2.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
+
+## 使用方法
+```vue
+<template>
+<div>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+  components: {
+    WxcSwipeAction
+  },
+  data() {
+    return {
+      data: [
+        {
+          title: "标题1",
+          right: [
+            {
+              text: "置顶",
+              onPress: function() {
+                modal.toast({
+                  message: "置顶",
+                  duration: 0.3
+                });
+              }
+            },
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        },
+        {
+          title: "标题2",
+          right: [
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        },
+        {
+          title: "标题3",
+          right: [
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        }
+      ]
+    };
+  },
+  
+  methods: {
+    onTest(node, i) {
+      modal.toast({
+        message: node.title,
+        duration: 0.3
+      });
+    }
+  }
+};
+</script>
+```
+
+### 可配置参数
+|参数|类型|是否要引入|默认值|描述|
+|-------------|------------|--------|-----|-----|
+|data|Array|Y|[]|列表数据|
+
+### Data API
+|属性|说明|类型|默认值|
+|-------------|------------|--------|-----|
+|title|标题|String|null|
+|right|右侧按钮组|Array|null|
+|autoClose|点击按钮后自动隐藏按钮|Boolean|false|
+
+### Button
+|参数|类型|描述|
+|-------------|------------|--------|
+|text|String|文案|
+|style|Object|按钮样式|
+|onPress|():void|单击事件|
+
+### 事件回调
+
+```
+// 单击列表
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-swipe-action/index.js b/packages/wxc-swipe-action/index.js
new file mode 100644
index 00000000..14bcbde6
--- /dev/null
+++ b/packages/wxc-swipe-action/index.js
@@ -0,0 +1 @@
+export { default } from './index.vue';
diff --git a/packages/wxc-swipe-action/index.vue b/packages/wxc-swipe-action/index.vue
new file mode 100644
index 00000000..ea4a4deb
--- /dev/null
+++ b/packages/wxc-swipe-action/index.vue
@@ -0,0 +1,174 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
+<template>
+<div class="container">
+  <div ref="skid" v-for="(item, i) of data" @click="onNodeClick(item, i)" :key="'skid-' + i" class="wxc-skid" :style="{width: (750 + item.right.length * 100) + 'px'}" @touchstart="(e) => !isAndroid && onPanStart(e, item, i)" @horizontalpan="(e) => isAndroid && onPanStart(e, item, i)" @touchend="(e) => onPanEnd(e, item, i)">
+    <text :class="['box-center', 'border', 'text', i + 1 === data.length && 'box-center-last']">{{item.title}}</text>
+    <div class="box-right">
+      <text class="child text" @click="onRightNode(item, child, i)" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
+    </div>
+  </div>
+</div>
+</template>
+
+<style>
+.container {
+  background-color: #ddd;
+  border-top-width: 1px;
+  border-top-color: #ddd;
+}
+.border {
+  border-bottom-width: 1px;
+  border-bottom-color: #ddd;
+}
+.wxc-skid {
+  flex-direction: row;
+  height: 90px;
+  background-color: white;
+}
+.box-right {
+  flex-direction: row;
+  align-items: center;
+  line-height: 90px;
+}
+.box-center {
+  width: 735px;
+  line-height: 90px;
+  background-color: white;
+  margin-left: 15px !important;
+  margin-left: 15px;
+}
+.box-center-last {
+  width: 750px;
+  margin-left: 0 !important;
+  padding-left: 15px !important;
+  margin-left: 0;
+  padding-left: 15px;
+}
+
+.child {
+  width: 100px;
+  text-align: center;
+  color: white;
+  background-color: #ddd;
+  line-height: 90px;
+}
+.text {
+  font-size: 30px;
+}
+</style>
+
+<script>
+import Binding from "weex-bindingx/lib/index.weex.js";
+const animation = weex.requireModule("animation");
+import Utils from "../utils";
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      mobileX: 0,
+      webStarX: 0,
+      saveIdx: null,
+      isAndroid: Utils.env.isAndroid()
+    };
+  },
+  methods: {
+    special(dom, styles) {
+      animation.transition(dom, {
+        styles,
+        duration: 200, //ms
+        timingFunction: "ease",
+        delay: 100 //ms
+      });
+    },
+    onRightNode(pNode, node, i) {
+      node.onPress();
+      if (pNode.autoClose)
+        this.special(this.$refs.skid[i], {
+          transform: `translate(0, 0)`
+        });
+    },
+    onNodeClick(node, i) {
+      if (this.mobileX < 0) {
+        this.mobileX = 0;
+        this.special(this.$refs.skid[this.saveIdx], {
+          transform: `translate(0, 0)`
+        });
+        this.isAndroid &&
+          this.special(this.$refs.skid[i], {
+            transform: `translate(0, 0)`
+          });
+      } else {
+        this.$emit("onNodeClick", node, i);
+      }
+    },
+
+    onPanEnd(e, node, i) {
+      if (Utils.env.isWeb()) {
+        const webEndX = e.changedTouches[0].pageX;
+        this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i]);
+      }
+    },
+    onPanStart: function(e, node, i) {
+      const { saveIdx } = this;
+      if (saveIdx !== i && saveIdx !== null) {
+        this.special(this.$refs.skid[saveIdx], {
+          transform: `translate(0, 0)`
+        });
+        this.mobileX = 0;
+      }
+      this.saveIdx = i;
+      !Utils.env.isWeb() ? this.mobile(e, node, i) : this.web(e, node, i);
+      e.stopPropagation();
+    },
+    web(e, node, i) {
+      this.webStarX = e.changedTouches[0].pageX;
+    },
+    mobile(e, node, i) {
+      var el = this.$refs["skid"][i];
+      Binding.bind(
+        {
+          anchor: el.ref,
+          eventType: "pan",
+          props: [
+            {
+              element: el.ref,
+              property: "transform.translateX",
+              expression: `x+${this.isAndroid ? 0 : this.mobileX}`
+            }
+          ]
+        },
+        e => {
+          const { state, deltaX } = e;
+          if (state === "end") {
+            this.mobileX += deltaX;
+            this.movingDistance(this.mobileX, node, el);
+          }
+        }
+      );
+    },
+    movingDistance(scope, node, el) {
+      const len = node.right ? node.right.length : 0;
+      const distance = len * -100;
+      if (scope < -30) {
+        this.special(el, {
+          transform: `translate(${distance}px, 0)`
+        });
+        this.mobileX = distance;
+      } else {
+        this.special(el, {
+          transform: `translate(0, 0)`
+        });
+        this.mobileX = 0;
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/wxc-swipe-action/package.json b/packages/wxc-swipe-action/package.json
new file mode 100644
index 00000000..6e22ed1f
--- /dev/null
+++ b/packages/wxc-swipe-action/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "wxc-simple-flow",
+  "version": "0.1.0",
+  "description": "Weex侧滑列表",
+  "main": "index.js",
+  "type": "weex",
+  "repository": "https://github.com/alibaba/weex-ui/tree/master/packages/wxc-simple-flow",
+  "keywords": [
+    "Weex",
+    "Vue",
+    "WeexComponent",
+    "DataDisplay",
+    "SimpleFlow",
+    "WeexUi"
+  ],
+  "weex": {
+    "plugins": {},
+    "market": {
+      "thumbnail": "https://img.alicdn.com/tfs/TB12jLwSpXXXXcVaXXXXXXXXXXX-750-1334.png"
+    }
+  },
+  "author": "wjun94",
+  "license": "MIT",
+  "dependencies": {
+  }
+}