fix(PullRefresh): failed to trigger pull refresh when scrolling

src/pull-refresh/index.js

@@ -43,8 +43,10 @@ export default createComponent({
   },
 
   computed: {
-    untouchable() {
-      return this.status === 'loading' || this.status === 'success' || this.disabled;
+    touchable() {
+      return (
+        this.status !== 'loading' && this.status !== 'success' && !this.disabled
+      );
     }
   },
 
@@ -54,6 +56,7 @@ export default createComponent({
 
       if (!loading && this.successText) {
         this.status = 'success';
+
         setTimeout(() => {
           this.setStatus(0);
         }, this.successDuration);
@@ -69,36 +72,40 @@ export default createComponent({
   },
 
   methods: {
-    onTouchStart(event) {
-      if (!this.untouchable && this.getCeiling()) {
+    checkPullStart(event) {
+      this.ceiling = getScrollTop(this.scrollEl) === 0;
+
+      if (this.ceiling) {
         this.duration = 0;
         this.touchStart(event);
       }
     },
 
+    onTouchStart(event) {
+      if (this.touchable) {
+        this.checkPullStart(event);
+      }
+    },
+
     onTouchMove(event) {
-      if (this.untouchable) {
+      if (!this.touchable) {
         return;
       }
 
+      if (!this.ceiling) {
+        this.checkPullStart(event);
+      }
+
       this.touchMove(event);
 
-      if (!this.ceiling && this.getCeiling()) {
-        this.duration = 0;
-        this.startY = event.touches[0].clientY;
-        this.deltaY = 0;
-      }
-
-      if (this.ceiling && this.deltaY >= 0) {
-        if (this.direction === 'vertical') {
-          this.setStatus(this.ease(this.deltaY));
-          preventDefault(event);
-        }
+      if (this.ceiling && this.deltaY >= 0 && this.direction === 'vertical') {
+        preventDefault(event);
+        this.setStatus(this.ease(this.deltaY));
       }
     },
 
     onTouchEnd() {
-      if (!this.untouchable && this.ceiling && this.deltaY) {
+      if (this.touchable && this.ceiling && this.deltaY) {
         this.duration = this.animationDuration;
 
         if (this.status === 'loosing') {
@@ -115,56 +122,70 @@ export default createComponent({
       }
     },
 
-    getCeiling() {
-      this.ceiling = getScrollTop(this.scrollEl) === 0;
-      return this.ceiling;
-    },
-
     ease(distance) {
       const { headHeight } = this;
-      return Math.round(
-        distance < headHeight
-          ? distance
-          : distance < headHeight * 2
-            ? headHeight + (distance - headHeight) / 2
-            : headHeight * 1.5 + (distance - headHeight * 2) / 4
-      );
+
+      if (distance > headHeight) {
+        if (distance < headHeight * 2) {
+          distance = headHeight + (distance - headHeight) / 2;
+        } else {
+          distance = headHeight * 1.5 + (distance - headHeight * 2) / 4;
+        }
+      }
+
+      return Math.round(distance);
     },
 
     setStatus(distance, isLoading) {
-      this.distance = distance;
+      let status;
+      if (isLoading) {
+        status = 'loading';
+      } else if (distance === 0) {
+        status = 'normal';
+      } else {
+        status = distance < this.headHeight ? 'pulling' : 'loosing';
+      }
 
-      const status = isLoading
-        ? 'loading'
-        : distance === 0
-          ? 'normal'
-          : distance < this.headHeight
-            ? 'pulling'
-            : 'loosing';
+      this.distance = distance;
 
       if (status !== this.status) {
         this.status = status;
       }
+    },
+
+    genStatus() {
+      const { status, distance } = this;
+      const slot = this.slots(status, { distance });
+
+      if (slot) {
+        return slot;
+      }
+
+      const nodes = [];
+      const text = this[`${status}Text`] || t(status);
+
+      if (TEXT_STATUS.indexOf(status) !== -1) {
+        nodes.push(<div class={bem('text')}>{text}</div>);
+      }
+
+      if (status === 'loading') {
+        nodes.push(<Loading size="16">{text}</Loading>);
+      }
+
+      return nodes;
     }
   },
 
   render() {
-    const { status, distance } = this;
-    const text = this[`${status}Text`] || t(status);
     const style = {
       transitionDuration: `${this.duration}ms`,
       transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : ''
     };
 
-    const Status = this.slots(status, { distance }) || [
-      TEXT_STATUS.indexOf(status) !== -1 && <div class={bem('text')}>{text}</div>,
-      status === 'loading' && <Loading size="16">{text}</Loading>
-    ];
-
     return (
       <div class={bem()}>
         <div ref="track" class={bem('track')} style={style}>
-          <div class={bem('head')}>{Status}</div>
+          <div class={bem('head')}>{this.genStatus()}</div>
           {this.slots()}
         </div>
       </div>