From e16a83a406231c97743febe8c2fa9db93659d4c2 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 7 May 2019 10:44:28 +0800
Subject: [PATCH 01/20] =?UTF-8?q?[!]=20wxc-button=E6=B7=BB=E5=8A=A0isHighl?=
 =?UTF-8?q?ight=E6=8E=A7=E5=88=B6button=E6=98=AF=E5=90=A6=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-button/index.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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;
   }
 

From 15d53505db1cd59e2f915772ed777d7d2c256fea Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 7 May 2019 10:46:16 +0800
Subject: [PATCH 02/20] =?UTF-8?q?[!]=20=E4=BF=AE=E6=94=B9wxc-button?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-button/README.md    | 1 +
 packages/wxc-button/README_cn.md | 1 +
 2 files changed, 2 insertions(+)

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） |
 

From 356eb3c3a93afd23ba1395dd137b39c38dec8bbf Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Mon, 13 May 2019 17:01:24 +0800
Subject: [PATCH 03/20] =?UTF-8?q?[+]=20=E6=B7=BB=E5=8A=A0=E4=BE=A7?=
 =?UTF-8?q?=E6=BB=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-skid/index.js  |   1 +
 packages/wxc-skid/index.vue | 130 ++++++++++++++++++++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 packages/wxc-skid/index.js
 create mode 100644 packages/wxc-skid/index.vue

diff --git a/packages/wxc-skid/index.js b/packages/wxc-skid/index.js
new file mode 100644
index 00000000..14bcbde6
--- /dev/null
+++ b/packages/wxc-skid/index.js
@@ -0,0 +1 @@
+export { default } from './index.vue';
diff --git a/packages/wxc-skid/index.vue b/packages/wxc-skid/index.vue
new file mode 100644
index 00000000..805a3b99
--- /dev/null
+++ b/packages/wxc-skid/index.vue
@@ -0,0 +1,130 @@
+<template>
+<div class="container">
+  <div ref="skid" v-for="(item, i) of data" :key="'skid-' + i" class="wxc-skid" @touchstart="(e) => onPanStart(e, item, i)">
+    <text @click="onNodeClick(item, i)" class="box-center border">{{item.title}}</text>
+    <div class="box-right">
+      <text class="child" @click="child.onPress" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import Binding from "weex-bindingx/lib/index.weex.js";
+const animation = weex.requireModule("animation");
+var modal = weex.requireModule("modal");
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    },
+  },
+  data() {
+    return {
+      x: 0,
+      saveIdx: null
+      // y: 0
+    };
+  },
+  created() {},
+  methods: {
+    special(dom, styles) {
+      animation.transition(dom, {
+        styles,
+        duration: 200, //ms
+        timingFunction: "ease",
+        delay: 100 //ms
+      });
+    },
+    onNodeClick(node) {
+      if (this.x < 0) {
+        this.x = 0;
+        this.special(this.$refs.skid[this.saveIdx], {
+          transform: `translate(0, 0)`
+        });
+      } else {
+        this.$emit('onNodeClick', node)
+      }
+    },
+    onPanStart: function(e, node, i) {
+      var el = this.$refs.skid[i];
+      const len = node.right.length;
+      const { saveIdx } = this;
+      if (saveIdx !== i) {
+        this.special(this.$refs.skid[saveIdx], {
+          transform: `translate(0, 0)`
+        });
+        this.x = 0;
+      }
+      this.saveIdx = i;
+      Binding.bind(
+        {
+          anchor: el.ref,
+          eventType: "pan",
+          props: [
+            {
+              element: el.ref,
+              property: "transform.translateX",
+              expression: `x+${this.x}`
+            }
+          ]
+        },
+        e => {
+          const { state, deltaX } = e;
+          if (state === "end") {
+            this.x += deltaX;
+            const distance = -100 * len;
+            if (this.x < distance / 2) {
+              this.special(el, {
+                transform: `translate(${distance}px, 0)`
+              });
+              this.x = distance;
+            } else {
+              this.special(el, {
+                transform: `translate(0, 0)`
+              });
+              this.x = 0;
+            }
+          }
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style>
+.container {
+  background-color: #ddd;
+}
+.border {
+  border-bottom-width: 1px;
+  border-bottom-color: #ddd;
+}
+.wxc-skid {
+  flex-direction: row;
+  padding-left: 15px;
+  width: 750px;
+  height: 90px;
+  background-color: white;
+}
+.box-right {
+  flex-direction: row;
+  align-items: center;
+  line-height: 90px;
+}
+.box-center {
+  width: 750px;
+  line-height: 90px;
+  background-color: white;
+}
+.child {
+  width: 100px;
+  text-align: center;
+  color: white;
+  background-color: #ddd;
+  line-height: 90px;
+}
+</style>
\ No newline at end of file

From d4a8ef6d5d801f28bf4716baa2d9facab379a3d7 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 10:16:33 +0800
Subject: [PATCH 04/20] =?UTF-8?q?=E6=B7=BB=E5=8A=A0web=E7=9A=84=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=EF=BC=8C=E8=A7=A3=E5=86=B3=E5=AE=89=E5=8D=93=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-skid/index.vue | 148 +++++++++++++++++++++---------------
 1 file changed, 87 insertions(+), 61 deletions(-)

diff --git a/packages/wxc-skid/index.vue b/packages/wxc-skid/index.vue
index 805a3b99..76241434 100644
--- a/packages/wxc-skid/index.vue
+++ b/packages/wxc-skid/index.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="container">
-  <div ref="skid" v-for="(item, i) of data" :key="'skid-' + i" class="wxc-skid" @touchstart="(e) => onPanStart(e, item, i)">
-    <text @click="onNodeClick(item, i)" class="box-center border">{{item.title}}</text>
+  <div ref="skid" v-for="(item, i) of data" @click="onNodeClick(item, i)" :key="'skid-' + i" class="wxc-skid" @touchstart="(e) => onPanStart(e, item, i)" @touchend="(e) => onPanEnd(e, item, i)">
+    <text :class="['box-center', 'border', i + 1 === data.length && 'box-center-last']">{{item.title}}</text>
     <div class="box-right">
       <text class="child" @click="child.onPress" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
     </div>
@@ -9,9 +9,53 @@
 </div>
 </template>
 
+<style>
+.container {
+  background-color: #ddd;
+}
+.border {
+  border-bottom-width: 1px;
+  border-bottom-color: #ddd;
+}
+.wxc-skid {
+  flex-direction: row;
+  width: 950px;
+  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;
+}
+</style>
+
 <script>
 import Binding from "weex-bindingx/lib/index.weex.js";
 const animation = weex.requireModule("animation");
+import Utils from "../utils";
 var modal = weex.requireModule("modal");
 
 export default {
@@ -19,16 +63,15 @@ export default {
     data: {
       type: Array,
       default: []
-    },
+    }
   },
   data() {
     return {
-      x: 0,
+      mobileX: 0,
+      webStarX: 0,
       saveIdx: null
-      // y: 0
     };
   },
-  created() {},
   methods: {
     special(dom, styles) {
       animation.transition(dom, {
@@ -39,26 +82,39 @@ export default {
       });
     },
     onNodeClick(node) {
-      if (this.x < 0) {
-        this.x = 0;
+      if (this.mobileX < 0) {
+        this.mobileX = 0;
         this.special(this.$refs.skid[this.saveIdx], {
           transform: `translate(0, 0)`
         });
       } else {
-        this.$emit('onNodeClick', node)
+        this.$emit("onNodeClick", node);
+      }
+    },
+
+    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) {
-      var el = this.$refs.skid[i];
-      const len = node.right.length;
       const { saveIdx } = this;
-      if (saveIdx !== i) {
+      if (saveIdx !== i && saveIdx !== null) {
         this.special(this.$refs.skid[saveIdx], {
           transform: `translate(0, 0)`
         });
-        this.x = 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,
@@ -67,64 +123,34 @@ export default {
             {
               element: el.ref,
               property: "transform.translateX",
-              expression: `x+${this.x}`
+              expression: `x+${this.mobileX}`
             }
           ]
         },
         e => {
           const { state, deltaX } = e;
           if (state === "end") {
-            this.x += deltaX;
-            const distance = -100 * len;
-            if (this.x < distance / 2) {
-              this.special(el, {
-                transform: `translate(${distance}px, 0)`
-              });
-              this.x = distance;
-            } else {
-              this.special(el, {
-                transform: `translate(0, 0)`
-              });
-              this.x = 0;
-            }
+            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>
-
-<style>
-.container {
-  background-color: #ddd;
-}
-.border {
-  border-bottom-width: 1px;
-  border-bottom-color: #ddd;
-}
-.wxc-skid {
-  flex-direction: row;
-  padding-left: 15px;
-  width: 750px;
-  height: 90px;
-  background-color: white;
-}
-.box-right {
-  flex-direction: row;
-  align-items: center;
-  line-height: 90px;
-}
-.box-center {
-  width: 750px;
-  line-height: 90px;
-  background-color: white;
-}
-.child {
-  width: 100px;
-  text-align: center;
-  color: white;
-  background-color: #ddd;
-  line-height: 90px;
-}
-</style>
\ No newline at end of file

From f3b551921770d90f5625dc14b153b5fe8a62da5c Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 11:14:58 +0800
Subject: [PATCH 05/20] =?UTF-8?q?=E5=8A=A8=E6=80=81=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=EF=BC=8C=E7=82=B9=E5=87=BB=E5=8F=B3=E8=BE=B9?=
 =?UTF-8?q?=EF=BC=8C=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-skid/index.vue | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/wxc-skid/index.vue b/packages/wxc-skid/index.vue
index 76241434..2a7a56ba 100644
--- a/packages/wxc-skid/index.vue
+++ b/packages/wxc-skid/index.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="container">
-  <div ref="skid" v-for="(item, i) of data" @click="onNodeClick(item, i)" :key="'skid-' + i" class="wxc-skid" @touchstart="(e) => onPanStart(e, item, i)" @touchend="(e) => onPanEnd(e, item, i)">
-    <text :class="['box-center', 'border', i + 1 === data.length && 'box-center-last']">{{item.title}}</text>
+  <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" @click="child.onPress" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
+      <text class="child text" @click="onRightNode(child, i)" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
     </div>
   </div>
 </div>
@@ -19,7 +19,6 @@
 }
 .wxc-skid {
   flex-direction: row;
-  width: 950px;
   height: 90px;
   background-color: white;
 }
@@ -50,13 +49,15 @@
   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";
-var modal = weex.requireModule("modal");
 
 export default {
   props: {
@@ -69,7 +70,8 @@ export default {
     return {
       mobileX: 0,
       webStarX: 0,
-      saveIdx: null
+      saveIdx: null,
+      isAndroid: Utils.env.isAndroid()
     };
   },
   methods: {
@@ -81,21 +83,31 @@ export default {
         delay: 100 //ms
       });
     },
-    onNodeClick(node) {
+    onRightNode(node, i) {
+      node.onPress();
+      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);
+        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])
+        this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i]);
       }
     },
     onPanStart: function(e, node, i) {
@@ -123,7 +135,7 @@ export default {
             {
               element: el.ref,
               property: "transform.translateX",
-              expression: `x+${this.mobileX}`
+              expression: `x+${this.isAndroid ? 0 : this.mobileX}`
             }
           ]
         },
@@ -131,7 +143,7 @@ export default {
           const { state, deltaX } = e;
           if (state === "end") {
             this.mobileX += deltaX;
-            this.movingDistance(this.mobileX, node, el)
+            this.movingDistance(this.mobileX, node, el);
           }
         }
       );

From b992ea7a40493468e30d2f8325ed9684c2a6bde1 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 12:22:00 +0800
Subject: [PATCH 06/20] =?UTF-8?q?[+]=20=E6=B7=BB=E5=8A=A0readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-skid/README.md    | 122 +++++++++++++++++++++++++++++++++
 packages/wxc-skid/README_cn.md | 122 +++++++++++++++++++++++++++++++++
 packages/wxc-skid/index.vue    |  14 ++--
 packages/wxc-skid/package.json |  26 +++++++
 4 files changed, 279 insertions(+), 5 deletions(-)
 create mode 100644 packages/wxc-skid/README.md
 create mode 100644 packages/wxc-skid/README_cn.md
 create mode 100644 packages/wxc-skid/package.json

diff --git a/packages/wxc-skid/README.md b/packages/wxc-skid/README.md
new file mode 100644
index 00000000..3aec83bd
--- /dev/null
+++ b/packages/wxc-skid/README.md
@@ -0,0 +1,122 @@
+# wxc-skid
+
+!> 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.
+
+## Code Example
+```vue
+<template>
+<div>
+    <WxcSkid @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSkid } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+  components: {
+    WxcSkid
+  },
+  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|
+
+### 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-skid/README_cn.md b/packages/wxc-skid/README_cn.md
new file mode 100644
index 00000000..ebdef348
--- /dev/null
+++ b/packages/wxc-skid/README_cn.md
@@ -0,0 +1,122 @@
+# wxc-skid
+
+!> 这个富交互体验组件依赖于 [BindingX](https://alibaba.github.io/bindingx/) 特性，使用前请确定你的App [是否安装](https://github.com/alibaba/bindingx#installation)
+
+### 规则
+- 一次只可滑动一行列表
+- 点击右边按钮或点击列表可隐藏操作。
+
+## 使用方法
+```vue
+<template>
+<div>
+    <WxcSkid @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSkid } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+  components: {
+    WxcSkid
+  },
+  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|[]|列表数据|
+
+### API
+|属性|说明|类型|默认值|
+|-------------|------------|--------|-----|
+|title|标题|String|null|
+|right|右侧按钮组|Array|null|
+|autoClose|点击按钮后自动隐藏按钮|Boolean|false|
+
+### Button
+|参数|类型|描述|
+|-------------|------------|--------|
+|text|String|文案|
+|style|Object|按钮样式|
+|onPress|():void|单击事件|
+
+### 事件回调
+
+```
+// 单击列表
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-skid/index.vue b/packages/wxc-skid/index.vue
index 2a7a56ba..8c321157 100644
--- a/packages/wxc-skid/index.vue
+++ b/packages/wxc-skid/index.vue
@@ -1,9 +1,12 @@
+<!-- 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(child, i)" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
+      <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>
@@ -83,11 +86,12 @@ export default {
         delay: 100 //ms
       });
     },
-    onRightNode(node, i) {
+    onRightNode(pNode, node, i) {
       node.onPress();
-      this.special(this.$refs.skid[i], {
-        transform: `translate(0, 0)`
-      });
+      if (pNode.autoClose)
+        this.special(this.$refs.skid[i], {
+          transform: `translate(0, 0)`
+        });
     },
     onNodeClick(node, i) {
       if (this.mobileX < 0) {
diff --git a/packages/wxc-skid/package.json b/packages/wxc-skid/package.json
new file mode 100644
index 00000000..6e22ed1f
--- /dev/null
+++ b/packages/wxc-skid/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": {
+  }
+}

From a629913fcbd8e99dd05206bb0f2e127dd7ac6314 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 12:24:46 +0800
Subject: [PATCH 07/20] =?UTF-8?q?[+]=20=E6=B7=BB=E5=8A=A0skid=E6=A1=88?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/skid/index.js  |  4 ++
 example/skid/index.vue | 86 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 example/skid/index.js
 create mode 100644 example/skid/index.vue

diff --git a/example/skid/index.js b/example/skid/index.js
new file mode 100644
index 00000000..6191d836
--- /dev/null
+++ b/example/skid/index.js
@@ -0,0 +1,4 @@
+import entry from './index.vue'
+
+entry.el = '#root'
+export default new Vue(entry)
diff --git a/example/skid/index.vue b/example/skid/index.vue
new file mode 100644
index 00000000..0f032a6a
--- /dev/null
+++ b/example/skid/index.vue
@@ -0,0 +1,86 @@
+<template>
+<div>
+    <WxcSkid @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import WxcSkid from '../../index';
+const modal = weex.requireModule("modal");
+
+export default {
+  data() {
+    return {
+      data: [
+        {
+          title: "标题1",
+          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: "标题23",
+          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" }
+            }
+          ]
+        }
+      ]
+    };
+  },
+  components: {
+    WxcSkid
+  },
+  methods: {
+    onTest(node, i) {
+      modal.toast({
+        message: node.title,
+        duration: 0.3
+      });
+    }
+  }
+};
+</script>
+

From 60001fd96ec3e798bd6da892a5d26d6f499f6985 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 13:52:57 +0800
Subject: [PATCH 08/20] =?UTF-8?q?[!]=20wxc-skid=E6=B7=BB=E5=8A=A0gif?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-skid/README.md    | 5 ++++-
 packages/wxc-skid/README_cn.md | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/wxc-skid/README.md b/packages/wxc-skid/README.md
index 3aec83bd..1957dba9 100644
--- a/packages/wxc-skid/README.md
+++ b/packages/wxc-skid/README.md
@@ -6,6 +6,9 @@
 - 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/3ofe2-af5lt1.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
+
 ## Code Example
 ```vue
 <template>
@@ -100,7 +103,7 @@ export default {
 |-------------|------------|--------|-----|-----|
 |data|Array|Y|[]|list|
 
-### API
+### Data API
 |Prop|Description|Type|Default|
 |-------------|------------|--------|-----|
 |title|content|String|null|
diff --git a/packages/wxc-skid/README_cn.md b/packages/wxc-skid/README_cn.md
index ebdef348..0cfbac5d 100644
--- a/packages/wxc-skid/README_cn.md
+++ b/packages/wxc-skid/README_cn.md
@@ -6,6 +6,9 @@
 - 一次只可滑动一行列表
 - 点击右边按钮或点击列表可隐藏操作。
 
+## [Demo]
+<img src="http://cdn.emas-poc.com/material/weex/3ofe2-af5lt1.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
+
 ## 使用方法
 ```vue
 <template>
@@ -100,7 +103,7 @@ export default {
 |-------------|------------|--------|-----|-----|
 |data|Array|Y|[]|列表数据|
 
-### API
+### Data API
 |属性|说明|类型|默认值|
 |-------------|------------|--------|-----|
 |title|标题|String|null|

From 39b884bf4e42b3ccd36219181a0774830a616d53 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 13:56:48 +0800
Subject: [PATCH 09/20] =?UTF-8?q?=E4=BF=AE=E6=94=B9changelog.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md    | 4 ++++
 CHANGELOG_cn.md | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47230e73..2e6c0d34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 0.6.13
+- [+] add wxc-skid
+- [!] [!] 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 cdc89cd6..d50ab37a 100644
--- a/CHANGELOG_cn.md
+++ b/CHANGELOG_cn.md
@@ -1,5 +1,9 @@
 # 升级日志
 
+## 0.6.13
+- [+] 添加wxc-skid侧滑组件
+- [!] 修复[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/) 设置透明度问题

From 5338de4f4ef264d0d831bf1b6f8478c21d3444cd Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 14:19:52 +0800
Subject: [PATCH 10/20] =?UTF-8?q?index.js=E5=BC=95=E5=85=A5WxcSkid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.js b/index.js
index 72009a4c..b6f6cc9c 100644
--- a/index.js
+++ b/index.js
@@ -36,6 +36,7 @@ import WxcResult from './packages/wxc-result';
 import WxcRichText from './packages/wxc-rich-text';
 import WxcSearchbar from './packages/wxc-searchbar';
 import WxcSimpleFlow from './packages/wxc-simple-flow';
+import WxcSkid from './packages/wxc-skid';
 import WxcSlideNav from './packages/wxc-slide-nav';
 import WxcSliderBar from './packages/wxc-slider-bar';
 import WxcSpecialRichText from './packages/wxc-special-rich-text';
@@ -78,6 +79,7 @@ export {
   WxcRichText,
   WxcSearchbar,
   WxcSimpleFlow,
+  WxcSkid,
   WxcSlideNav,
   WxcSliderBar,
   WxcSpecialRichText,

From dcc4d23069e4b0a9e6584456e1f2e665030004ac Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 14:34:09 +0800
Subject: [PATCH 11/20] =?UTF-8?q?[!]=20wxc-skid=E4=BF=AE=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?wxc-swipe-action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/{skid => swipe-action}/index.js              | 0
 example/{skid => swipe-action}/index.vue             | 6 +++---
 index.js                                             | 4 ++--
 packages/{wxc-skid => wxc-swipe-action}/README.md    | 6 +++---
 packages/{wxc-skid => wxc-swipe-action}/README_cn.md | 6 +++---
 packages/{wxc-skid => wxc-swipe-action}/index.js     | 0
 packages/{wxc-skid => wxc-swipe-action}/index.vue    | 0
 packages/{wxc-skid => wxc-swipe-action}/package.json | 0
 8 files changed, 11 insertions(+), 11 deletions(-)
 rename example/{skid => swipe-action}/index.js (100%)
 rename example/{skid => swipe-action}/index.vue (93%)
 rename packages/{wxc-skid => wxc-swipe-action}/README.md (95%)
 rename packages/{wxc-skid => wxc-swipe-action}/README_cn.md (95%)
 rename packages/{wxc-skid => wxc-swipe-action}/index.js (100%)
 rename packages/{wxc-skid => wxc-swipe-action}/index.vue (100%)
 rename packages/{wxc-skid => wxc-swipe-action}/package.json (100%)

diff --git a/example/skid/index.js b/example/swipe-action/index.js
similarity index 100%
rename from example/skid/index.js
rename to example/swipe-action/index.js
diff --git a/example/skid/index.vue b/example/swipe-action/index.vue
similarity index 93%
rename from example/skid/index.vue
rename to example/swipe-action/index.vue
index 0f032a6a..0c5ea883 100644
--- a/example/skid/index.vue
+++ b/example/swipe-action/index.vue
@@ -1,11 +1,11 @@
 <template>
 <div>
-    <WxcSkid @onNodeClick='onTest' :data='data'/>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
 </div>
 </template>
 
 <script>
-import WxcSkid from '../../index';
+import WxcSwipeAction from '../../index';
 const modal = weex.requireModule("modal");
 
 export default {
@@ -71,7 +71,7 @@ export default {
     };
   },
   components: {
-    WxcSkid
+    WxcSwipeAction
   },
   methods: {
     onTest(node, i) {
diff --git a/index.js b/index.js
index b6f6cc9c..09f7c7c2 100644
--- a/index.js
+++ b/index.js
@@ -36,11 +36,11 @@ import WxcResult from './packages/wxc-result';
 import WxcRichText from './packages/wxc-rich-text';
 import WxcSearchbar from './packages/wxc-searchbar';
 import WxcSimpleFlow from './packages/wxc-simple-flow';
-import WxcSkid from './packages/wxc-skid';
 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';
@@ -79,11 +79,11 @@ export {
   WxcRichText,
   WxcSearchbar,
   WxcSimpleFlow,
-  WxcSkid,
   WxcSlideNav,
   WxcSliderBar,
   WxcSpecialRichText,
   WxcStepper,
+  WxcSwipeAction,
   WxcTabBar,
   WxcTabPage,
   WxcTag
diff --git a/packages/wxc-skid/README.md b/packages/wxc-swipe-action/README.md
similarity index 95%
rename from packages/wxc-skid/README.md
rename to packages/wxc-swipe-action/README.md
index 1957dba9..8f62333f 100644
--- a/packages/wxc-skid/README.md
+++ b/packages/wxc-swipe-action/README.md
@@ -13,17 +13,17 @@
 ```vue
 <template>
 <div>
-    <WxcSkid @onNodeClick='onTest' :data='data'/>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
 </div>
 </template>
 
 <script>
-import { WxcSkid } from 'weex-ui';
+import { WxcSwipeAction } from 'weex-ui';
 const modal = weex.requireModule("modal");
 
 export default {
   components: {
-    WxcSkid
+    WxcSwipeAction
   },
   data() {
     return {
diff --git a/packages/wxc-skid/README_cn.md b/packages/wxc-swipe-action/README_cn.md
similarity index 95%
rename from packages/wxc-skid/README_cn.md
rename to packages/wxc-swipe-action/README_cn.md
index 0cfbac5d..283ddd77 100644
--- a/packages/wxc-skid/README_cn.md
+++ b/packages/wxc-swipe-action/README_cn.md
@@ -13,17 +13,17 @@
 ```vue
 <template>
 <div>
-    <WxcSkid @onNodeClick='onTest' :data='data'/>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
 </div>
 </template>
 
 <script>
-import { WxcSkid } from 'weex-ui';
+import { WxcSwipeAction } from 'weex-ui';
 const modal = weex.requireModule("modal");
 
 export default {
   components: {
-    WxcSkid
+    WxcSwipeAction
   },
   data() {
     return {
diff --git a/packages/wxc-skid/index.js b/packages/wxc-swipe-action/index.js
similarity index 100%
rename from packages/wxc-skid/index.js
rename to packages/wxc-swipe-action/index.js
diff --git a/packages/wxc-skid/index.vue b/packages/wxc-swipe-action/index.vue
similarity index 100%
rename from packages/wxc-skid/index.vue
rename to packages/wxc-swipe-action/index.vue
diff --git a/packages/wxc-skid/package.json b/packages/wxc-swipe-action/package.json
similarity index 100%
rename from packages/wxc-skid/package.json
rename to packages/wxc-swipe-action/package.json

From e1b7e94a259817495d9ed14397b4e74c5547e80c Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 14:34:46 +0800
Subject: [PATCH 12/20] =?UTF-8?q?=E4=BF=AE=E6=94=B9changelog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md    | 2 +-
 CHANGELOG_cn.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e6c0d34..3254b524 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # Change Log
 
 ## 0.6.13
-- [+] add wxc-skid
+- [+] 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
diff --git a/CHANGELOG_cn.md b/CHANGELOG_cn.md
index d50ab37a..1d99f30e 100644
--- a/CHANGELOG_cn.md
+++ b/CHANGELOG_cn.md
@@ -1,7 +1,7 @@
 # 升级日志
 
 ## 0.6.13
-- [+] 添加wxc-skid侧滑组件
+- [+] 添加wxc-swipe-action侧滑组件
 - [!] 修复[wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) 设置display样式问题，添加isHighlight属性控制button是否高亮显示
 
 ## 0.6.12

From 5a5312faec2a4c391a3c364d3e2984582b5cecc2 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 15:04:29 +0800
Subject: [PATCH 13/20] =?UTF-8?q?[!]=20=E4=BF=AE=E6=94=B9swipe-action=20ex?=
 =?UTF-8?q?ample?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/swipe-action/index.vue      | 37 +++++++++++++----------------
 packages/wxc-swipe-action/index.vue |  2 ++
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/example/swipe-action/index.vue b/example/swipe-action/index.vue
index 0c5ea883..73a943cf 100644
--- a/example/swipe-action/index.vue
+++ b/example/swipe-action/index.vue
@@ -1,19 +1,31 @@
 <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';
+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: "标题1",
+          title: "点击右边按钮隐藏",
           autoClose: true,
           right: [
             {
@@ -38,22 +50,7 @@ export default {
           ]
         },
         {
-          title: "标题23",
-          right: [
-            {
-              text: "删除",
-              onPress: () => {
-                modal.toast({
-                  message: "删除",
-                  duration: 0.3
-                });
-              },
-              style: { backgroundColor: "#F4333C", color: "white" }
-            }
-          ]
-        },
-        {
-          title: "标题3",
+          title: "默认效果",
           right: [
             {
               text: "删除",
@@ -70,8 +67,8 @@ export default {
       ]
     };
   },
-  components: {
-    WxcSwipeAction
+  created() {
+    setTitle("SwipeAction");
   },
   methods: {
     onTest(node, i) {
diff --git a/packages/wxc-swipe-action/index.vue b/packages/wxc-swipe-action/index.vue
index 8c321157..ea4a4deb 100644
--- a/packages/wxc-swipe-action/index.vue
+++ b/packages/wxc-swipe-action/index.vue
@@ -15,6 +15,8 @@
 <style>
 .container {
   background-color: #ddd;
+  border-top-width: 1px;
+  border-top-color: #ddd;
 }
 .border {
   border-bottom-width: 1px;

From d3eab5f91ae6ab0f201785efb5aad02782366c34 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 15:09:40 +0800
Subject: [PATCH 14/20] =?UTF-8?q?[!]=20=E4=BF=AE=E6=94=B9wxc-swipe-action?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-swipe-action/README.md    | 2 +-
 packages/wxc-swipe-action/README_cn.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/wxc-swipe-action/README.md b/packages/wxc-swipe-action/README.md
index 8f62333f..ee3235db 100644
--- a/packages/wxc-swipe-action/README.md
+++ b/packages/wxc-swipe-action/README.md
@@ -7,7 +7,7 @@
 - Hide operations by clicking on the right button or by clicking on the list.
 
 ## [Demo]
-<img src="http://cdn.emas-poc.com/material/weex/3ofe2-af5lt1.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
+<img src="http://cdn.emas-poc.com/material/weex/82xh6-9dnxz2.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
 
 ## Code Example
 ```vue
diff --git a/packages/wxc-swipe-action/README_cn.md b/packages/wxc-swipe-action/README_cn.md
index 283ddd77..52024936 100644
--- a/packages/wxc-swipe-action/README_cn.md
+++ b/packages/wxc-swipe-action/README_cn.md
@@ -7,7 +7,7 @@
 - 点击右边按钮或点击列表可隐藏操作。
 
 ## [Demo]
-<img src="http://cdn.emas-poc.com/material/weex/3ofe2-af5lt1.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
+<img src="http://cdn.emas-poc.com/material/weex/82xh6-9dnxz2.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;
 
 ## 使用方法
 ```vue

From a8384b35ae887eef3554618afc3a490356b739eb Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 15:11:13 +0800
Subject: [PATCH 15/20] =?UTF-8?q?[!]=20swipe-action=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/swipe-action/index.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/example/swipe-action/index.vue b/example/swipe-action/index.vue
index 73a943cf..4ffefd71 100644
--- a/example/swipe-action/index.vue
+++ b/example/swipe-action/index.vue
@@ -1,3 +1,6 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
 <template>
 <div>
   <scroller class="wxc-demo">

From fcc849c4437451383675ab5a70265a325531c880 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Tue, 14 May 2019 15:14:22 +0800
Subject: [PATCH 16/20] =?UTF-8?q?[!]=20=E4=BF=AE=E6=94=B9wxc-swipe-action?=
 =?UTF-8?q?=20README.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-swipe-action/README.md    | 2 +-
 packages/wxc-swipe-action/README_cn.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/wxc-swipe-action/README.md b/packages/wxc-swipe-action/README.md
index ee3235db..84f2d0c6 100644
--- a/packages/wxc-swipe-action/README.md
+++ b/packages/wxc-swipe-action/README.md
@@ -1,4 +1,4 @@
-# wxc-skid
+# 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).
 
diff --git a/packages/wxc-swipe-action/README_cn.md b/packages/wxc-swipe-action/README_cn.md
index 52024936..8b0019ef 100644
--- a/packages/wxc-swipe-action/README_cn.md
+++ b/packages/wxc-swipe-action/README_cn.md
@@ -1,4 +1,4 @@
-# wxc-skid
+# wxc-swipe-action
 
 !> 这个富交互体验组件依赖于 [BindingX](https://alibaba.github.io/bindingx/) 特性，使用前请确定你的App [是否安装](https://github.com/alibaba/bindingx#installation)
 

From 71e9d77a527c973aaf5c563b1bbd1c684ff9c979 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Wed, 15 May 2019 11:39:18 +0800
Subject: [PATCH 17/20] =?UTF-8?q?[!]=20wxc-iverlay=E5=92=8Cwxc-dialog?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0left=E5=B1=9E=E6=80=A7=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E5=B9=B3=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-dialog/README.md     | 1 +
 packages/wxc-dialog/README_cn.md  | 1 +
 packages/wxc-dialog/index.vue     | 8 ++++++--
 packages/wxc-overlay/README.md    | 1 +
 packages/wxc-overlay/README_cn.md | 1 +
 packages/wxc-overlay/index.vue    | 7 +++++--
 6 files changed, 15 insertions(+), 4 deletions(-)

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..73049b9d 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: (left + 96) + 'px'}">
       <div class="dialog-content">
         <slot name="title">
           <text class="content-title">{{title}}</text>
@@ -169,6 +169,10 @@
       isChecked: {
         type: Boolean,
         default: false
+      },
+      left: {
+        type: Number,
+        default: 0
       }
     },
     data: () => ({
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..aa96a757 100644
--- a/packages/wxc-overlay/index.vue
+++ b/packages/wxc-overlay/index.vue
@@ -9,7 +9,7 @@
          v-if="show"
          :hack="shouldShow"
          @click="overlayClicked"
-         :style="overlayStyle">
+         :style="Object.assign({left: left + 'px'} ,overlayStyle)">
     </div>
   </div>
 </template>
@@ -18,7 +18,6 @@
   .wxc-overlay {
     width: 750px;
     position: fixed;
-    left: 0;
     top: 0;
     bottom: 0;
     right: 0;
@@ -33,6 +32,10 @@
         type: Boolean,
         default: true
       },
+      left: {
+        default: Number,
+        default: 0
+      },
       hasAnimation: {
         type: Boolean,
         default: true

From 3a2b1088d9fca6af3c661d61a61c7df6ccf91e93 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Wed, 15 May 2019 11:45:37 +0800
Subject: [PATCH 18/20] =?UTF-8?q?=E4=BF=AE=E6=94=B9changelog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md    | 1 +
 CHANGELOG_cn.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3254b524..de7535f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # 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.
 
diff --git a/CHANGELOG_cn.md b/CHANGELOG_cn.md
index 1d99f30e..595a9205 100644
--- a/CHANGELOG_cn.md
+++ b/CHANGELOG_cn.md
@@ -1,6 +1,7 @@
 # 升级日志
 
 ## 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是否高亮显示
 

From 3dbc651f24490362d83955c42716cdf7bc367265 Mon Sep 17 00:00:00 2001
From: wjun94 <kasepa1994@gmail.com>
Date: Wed, 15 May 2019 14:13:07 +0800
Subject: [PATCH 19/20] =?UTF-8?q?[!]=20web=E7=AB=AF=E6=89=8D=E6=9C=89?=
 =?UTF-8?q?=E5=B9=B3=E7=A7=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/wxc-dialog/index.vue  | 6 ++++--
 packages/wxc-overlay/index.vue | 7 +++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/wxc-dialog/index.vue b/packages/wxc-dialog/index.vue
index 73049b9d..fa21e6a1 100644
--- a/packages/wxc-dialog/index.vue
+++ b/packages/wxc-dialog/index.vue
@@ -5,7 +5,7 @@
 <template>
   <div class="container">
     <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: (left + 96) + 'px'}">
+    <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 },
@@ -177,7 +178,8 @@
     },
     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/index.vue b/packages/wxc-overlay/index.vue
index aa96a757..60659a0d 100644
--- a/packages/wxc-overlay/index.vue
+++ b/packages/wxc-overlay/index.vue
@@ -9,7 +9,7 @@
          v-if="show"
          :hack="shouldShow"
          @click="overlayClicked"
-         :style="Object.assign({left: left + 'px'} ,overlayStyle)">
+         :style="overlayStyle">
     </div>
   </div>
 </template>
@@ -26,6 +26,8 @@
 
 <script>
   const animation = weex.requireModule('animation');
+  import Utils from '../utils';
+
   export default {
     props: {
       show: {
@@ -61,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 () {

From ecd0b4684e1c8e298072aca7c85dfe8fd49c774d Mon Sep 17 00:00:00 2001
From: Tw93 <tw93@qq.com>
Date: Wed, 15 May 2019 15:29:57 +0800
Subject: [PATCH 20/20] [+] update docs

---
 docs/_coverpage.md  | 2 +-
 docs/_sidebar.md    | 1 +
 docs/_sidebar_cn.md | 2 ++
 package.json        | 2 +-
 4 files changed, 5 insertions(+), 2 deletions(-)

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 ed9656f0..0ee2b7c7 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 d6705720..25d7aa88 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/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",