Merge pull request #1174 from deepkolos/cell-swipe-fix

cell-swipe-fix 增加swipeLock #1128
ElemeFE · Nov 16, 2017 · 87b273f · 87b273f
2 parents ee48bcb + 5d72310
commit 87b273f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/example/pages/cell-swipe.vue b/example/pages/cell-swipe.vue
@@ -2,7 +2,7 @@
   <div class="page-cell">
     <div class="page-title">Cell Swipe</div>
     <mt-cell-swipe
-      v-for="n in 10"
+      v-for="n in 15"
       :right="rightButtons"
       title="swipe me">
     </mt-cell-swipe>

diff --git a/packages/cell-swipe/src/cell-swipe.vue b/packages/cell-swipe/src/cell-swipe.vue
@@ -126,6 +126,12 @@ export default {
       return `translate3d(${offset}px, 0, 0)`;
     },
 
+    setAnimations(val) {
+      this.wrap.style.transitionDuration = val;
+      this.rightWrapElm.style.transitionDuration = val;
+      this.leftWrapElm.style.transitionDuration = val;
+    },
+
     swipeMove(offset = 0) {
       this.wrap.style.webkitTransform = this.translate3d(offset);
       this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
@@ -165,38 +171,54 @@ export default {
       this.dragging = true;
       this.start.x = evt.pageX;
       this.start.y = evt.pageY;
+      this.direction = '';
     },
 
     onDrag(evt) {
       if (this.opened) {
-        !this.swiping && this.swipeMove(0);
+        if (!this.swiping) {
+          this.swipeMove(0);
+          this.setAnimations('');
+        }
         this.opened = false;
         return;
       }
       if (!this.dragging) return;
+
       let swiping;
       const e = evt.changedTouches ? evt.changedTouches[0] : evt;
       const offsetTop = e.pageY - this.start.y;
       const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
 
-      if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
-        (offsetLeft > 0 && offsetLeft > this.leftWidth) ||
-        (offsetLeft > 0 && !this.leftWidth) ||
-        (offsetLeft < 0 && !this.rightWidth)) {
-        return;
-      }
-
       const y = Math.abs(offsetTop);
       const x = Math.abs(offsetLeft);
 
-      swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
-      if (!swiping) return;
-      evt.preventDefault();
+      this.setAnimations('0ms');
 
-      this.swipeMove(offsetLeft);
+      if (this.direction === '') {
+        this.direction = x > y ? 'horizonal' : 'vertical';
+      }
+
+      if (this.direction === 'horizonal') {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
+        if (!swiping) return;
+
+        if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
+          (offsetLeft > 0 && offsetLeft > this.leftWidth) ||
+          (offsetLeft > 0 && !this.leftWidth) ||
+          (offsetLeft < 0 && !this.rightWidth)) {
+        } else {
+          this.swipeMove(offsetLeft);
+        }
+      }
     },
 
     endDrag() {
+      this.direction = '';
+      this.setAnimations('');
       if (!this.swiping) return;
       this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
     }