[improvement] Swipe: optimize swipe gesture (#2039)

packages/mixins/touch.js

@@ -1,4 +1,21 @@
+const MIN_DISTANCE = 10;
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
 export default {
+  data() {
+    return {
+      direction: ''
+    };
+  },
+
   methods: {
     touchStart(event) {
       this.resetTouchStatus();
@@ -12,7 +29,7 @@ export default {
       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);
     },
 
     resetTouchStatus() {

packages/pull-refresh/test/index.spec.js

@@ -16,7 +16,7 @@ test('change head content when pulling down', () => {
 
   // pulling
   trigger(track, 'touchstart', 0, 0);
-  trigger(track, 'touchmove', 0, 10);
+  trigger(track, 'touchmove', 0, 20);
   expect(wrapper).toMatchSnapshot();
 
   // loosing

packages/swipe/index.vue

@@ -130,6 +130,11 @@ export default create({
       return (this.active + this.count) % this.count;
     },
 
+    isCorrectDirection() {
+      const expect = this.vertical ? 'vertical' : 'horizontal';
+      return this.direction === expect;
+    },
+
     trackStyle() {
       const mainAxis = this.vertical ? 'height' : 'width';
       const crossAxis = this.vertical ? 'width' : 'height';
@@ -178,10 +183,7 @@ export default create({
 
       this.touchMove(event);
 
-      if (
-        (this.vertical && this.direction === 'vertical') ||
-        this.direction === 'horizontal'
-      ) {
+      if (this.isCorrectDirection) {
         event.preventDefault();
         event.stopPropagation();
         this.move(0, Math.min(Math.max(this.delta, -this.size), this.size));
@@ -191,9 +193,9 @@ export default create({
     onTouchEnd() {
       if (!this.touchable || !this.swiping) return;
 
-      if (this.delta) {
+      if (this.delta && this.isCorrectDirection) {
         const offset = this.vertical ? this.offsetY : this.offsetX;
-        this.move(offset > 50 ? (this.delta > 0 ? -1 : 1) : 0);
+        this.move(offset > 0 ? (this.delta > 0 ? -1 : 1) : 0);
       }
 
       this.swiping = false;
@@ -204,14 +206,18 @@ export default create({
       const { delta, active, count, swipes, trackSize } = this;
       const atFirst = active === 0;
       const atLast = active === count - 1;
-      const outOfBounds = !this.loop && ((atFirst && (offset > 0 || move < 0)) || (atLast && (offset < 0 || move > 0)));
+      const outOfBounds =
+        !this.loop &&
+        ((atFirst && (offset > 0 || move < 0)) ||
+          (atLast && (offset < 0 || move > 0)));
 
       if (outOfBounds || count <= 1) {
         return;
       }
 
-      swipes[0].offset = (atLast && (delta < 0 || move > 0)) ? trackSize : 0;
-      swipes[count - 1].offset = (atFirst && (delta > 0 || move < 0)) ? -trackSize : 0;
+      swipes[0].offset = atLast && (delta < 0 || move > 0) ? trackSize : 0;
+      swipes[count - 1].offset =
+        atFirst && (delta > 0 || move < 0) ? -trackSize : 0;
 
       if (move && active + move >= -1 && active + move <= count) {
         this.active += move;
@@ -225,7 +231,7 @@ export default create({
       this.correctPosition();
       setTimeout(() => {
         this.swiping = false;
-        this.move(index % this.count - this.active);
+        this.move((index % this.count) - this.active);
       }, 30);
     },
 

packages/switch/zh-CN.md

@@ -75,8 +75,8 @@ export default {
 | loading | 是否为加载状态 | `Boolean` | `false` | - |
 | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
 | size | 开关尺寸 | `String` | `30px` | 1.0.0 |
-| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.3.11 |
-| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.3.11 |
+| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.4.2 |
+| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.4.2 |
 
 ### Event