feat(SwipeCell): add new event open & stop catch touchend (#2432)

fix #2402

packages/mixins/touch.ts

@@ -1,14 +1,32 @@
 import { Weapp } from 'definitions/weapp';
 
+const MIN_DISTANCE = 10;
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+
+  return '';
+}
+
 export const touch = Behavior({
   methods: {
-    touchStart(event: Weapp.TouchEvent) {
-      const touch = event.touches[0];
+    resetTouchStatus() {
       this.direction = '';
       this.deltaX = 0;
       this.deltaY = 0;
       this.offsetX = 0;
       this.offsetY = 0;
+    },
+
+    touchStart(event: Weapp.TouchEvent) {
+      this.resetTouchStatus();
+      const touch = event.touches[0];
       this.startX = touch.clientX;
       this.startY = touch.clientY;
     },
@@ -19,12 +37,7 @@ export const touch = Behavior({
       this.deltaY = touch.clientY - this.startY;
       this.offsetX = Math.abs(this.deltaX);
       this.offsetY = Math.abs(this.deltaY);
-      this.direction =
-        this.offsetX > this.offsetY
-          ? 'horizontal'
-          : this.offsetX < this.offsetY
-            ? 'vertical'
-            : '';
+      this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
     }
   }
 });

packages/swipe-cell/README.md

@@ -82,7 +82,8 @@ Page({
 | 事件名 | 说明 | 参数 |
 |------|------|------|
 | click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
-| close | 点击时触发 | 整体是一个 Object，包含 `position`, `instance` 两个 key。 |
+| close | 关闭时触发 | 	{ position: 'left' \| 'right' , instance , name: string } |
+| open | 打开时触发 | 	{ position: 'left' \| 'right' , name: string } |
 
 ### close 参数
 
@@ -90,6 +91,7 @@ Page({
 |------|------|------|
 | position | *string* | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
 | instance | *object* | SwipeCell 实例 |
+| name | 标识符 | *string* |
 
 ### 方法
 

packages/swipe-cell/index.ts

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { Weapp } from 'definitions/weapp';
+import { range } from '../common/utils';
 
 const THRESHOLD = 0.3;
 let ARRAY: WechatMiniprogram.Component.TrivialInstance[] = [];
@@ -43,6 +44,11 @@ VantComponent({
       const { leftWidth, rightWidth } = this.data;
       const offset = position === 'left' ? leftWidth : -rightWidth;
       this.swipeMove(offset);
+
+      this.$emit('open', {
+        position,
+        name: this.data.name
+      });
     },
 
     close() {
@@ -50,10 +56,10 @@ VantComponent({
     },
 
     swipeMove(offset: number = 0) {
-      this.offset = offset;
+      this.offset = range(offset, -this.data.rightWidth, this.data.leftWidth);
 
-      const transform = `translate3d(${offset}px, 0, 0)`;
-      const transition = this.draging
+      const transform = `translate3d(${this.offset}px, 0, 0)`;
+      const transition = this.dragging
         ? 'none'
         : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
 
@@ -86,15 +92,7 @@ VantComponent({
         return;
       }
 
-      ARRAY.forEach(item => {
-        if (item !== this) {
-          item.close();
-        }
-      });
-
-      this.draging = true;
       this.startOffset = this.offset;
-      this.firstDirection = '';
       this.touchStart(event);
     },
 
@@ -107,27 +105,14 @@ VantComponent({
 
       this.touchMove(event);
 
-      if (!this.firstDirection) {
-        this.firstDirection = this.direction;
-        this.setData({ catchMove: this.firstDirection === 'horizontal' });
-      }
-
-      if (this.firstDirection === 'vertical') {
+      if (this.direction !== 'horizontal') {
         return;
       }
 
-      const { leftWidth, rightWidth } = this.data;
-
-      const offset = this.startOffset + this.deltaX;
-
-      if (
-        (rightWidth > 0 && -offset > rightWidth) ||
-        (leftWidth > 0 && offset > leftWidth)
-      ) {
-        return;
-      }
-
-      this.swipeMove(offset);
+      this.dragging = true;
+      ARRAY.filter(item => item !== this).forEach(item => item.close());
+      this.setData({ catchMove: true });
+      this.swipeMove(this.startOffset + this.deltaX);
     },
 
     endDrag() {
@@ -135,7 +120,7 @@ VantComponent({
         return;
       }
 
-      this.draging = false;
+      this.dragging = false;
       this.swipeLeaveTransition();
     },
 
@@ -148,7 +133,11 @@ VantComponent({
       }
 
       if (this.data.asyncClose) {
-        this.$emit('close', { position, instance: this, name: this.data.name });
+        this.$emit('close', {
+          position,
+          instance: this,
+          name: this.data.name
+        });
       } else {
         this.swipeMove(0);
       }

packages/swipe-cell/index.wxml

@@ -5,8 +5,8 @@
   bindtouchstart="startDrag"
   catchtouchmove="{{ catchMove ? 'noop' : '' }}"
   capture-bind:touchmove="onDrag"
-  catchtouchend="endDrag"
-  catchtouchcancel="endDrag"
+  bindtouchend="endDrag"
+  bindtouchcancel="endDrag"
 >
   <view style="{{ wrapperStyle }}">
     <view wx:if="{{ leftWidth }}" class="van-swipe-cell__left" data-key="left" catch:tap="onClick">