commit

@@ -22,18 +22,16 @@
       :pullDownRefresh="pullDownRefresh"
       :pullDownStyle="pullDownStyle"
       :beforePullDown="beforePullDown"
-      :isPullingDown="isPullingDown"
       :bubbleY="bubbleY"
     >
       <div ref="pulldown" class="pulldown-wrapper" :style="pullDownStyle" v-if="pullDownRefresh">
-        <div class="before-trigger" v-if="beforePullDown">
-          <span>加载中</span>
+        <div class="before-trigger" v-show="beforePullDown">
+          <div id="beforePullDown"></div>
         </div>
-        <div class="after-trigger" v-else>
-          <div v-if="isPullingDown" class="loading">
-            <span>...</span>
+        <div class="after-trigger" v-show="!beforePullDown">
+          <div class="loading">
+            <div id="afterPullDown"></div>
           </div>
-          <div v-else><span>{{refreshTxt}}</span></div>
         </div>
       </div>
     </slot>
@@ -42,6 +40,7 @@
 
 <script>
 import {BetterScroll} from 'cube-ui';
+import lottie from 'lottie-web';
 
 function getRect(el) {
   if (el instanceof window.SVGElement) {
@@ -106,7 +105,12 @@ export default {
     },
     pullDownRefresh: {
       type: null,
-      default: false
+      default() {
+        return {
+          threshold: 70,
+          stop: 90
+        };
+      }
     },
     pullUpLoad: {
       type: null,
@@ -143,7 +147,6 @@ export default {
     return {
       beforePullDown: true,
       isRebounding: false,
-      isPullingDown: false,
       isPullUpLoad: false,
       pullUpDirty: true,
       pullDownStyle: '',
@@ -162,11 +165,14 @@ export default {
     }
   },
   created() {
-    this.pullDownInitTop = -50;
+    this.pullDownInitTop = -90;
   },
   mounted() {
     setTimeout(() => {
       this.initScroll();
+      setTimeout(() => {
+        this.pullDownInitTop = 0 - this.$refs.pulldown.clientHeight;
+      }, 0);
     }, 20);
   },
   methods: {
@@ -214,6 +220,7 @@ export default {
       if (this.pullUpLoad) {
         this._initPullUpLoad();
       }
+      this._initLottie();
     },
     disable() {
       this.scroll && this.scroll.disable();
@@ -234,8 +241,7 @@ export default {
       this.scroll.destroy();
     },
     forceUpdate(dirty) {
-      if (this.pullDownRefresh && this.isPullingDown) {
-        this.isPullingDown = false;
+      if (this.pullDownRefresh) {
         this._reboundPullDown().then(() => {
           this._afterPullDown();
         });
@@ -248,10 +254,26 @@ export default {
         this.refresh();
       }
     },
+    _initLottie() {
+      this.lottieBefore = lottie.loadAnimation({
+        container: document.getElementById('beforePullDown'), // the dom element that will contain the animation
+        renderer: 'svg',
+        loop: false,
+        autoplay: true,
+        path: 'https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json' // the path to the animation json
+      });
+      this.lottieAfter = lottie.loadAnimation({
+        container: document.getElementById('afterPullDown'), // the dom element that will contain the animation
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+        path: 'https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json' // the path to the animation json
+      });
+
+    },
     _initPullDownRefresh() {
       this.scroll.on('pullingDown', () => {
         this.beforePullDown = false;
-        this.isPullingDown = true;
         this.$emit('pullingDown');
       });
       this.scroll.on('scroll', (pos) => {
@@ -259,13 +281,15 @@ export default {
           return;
         }
         if (this.beforePullDown) {
-          this.bubbleY = Math.max(0, pos.y + this.pullDownInitTop);
-          this.pullDownStyle = `top:${Math.min(pos.y + this.pullDownInitTop, 10)}px`;
+          if (pos.y > 43) {
+            this.lottieBefore.goToAndStop(Math.abs(pos.y - 43) * 15);
           } else {
-          this.bubbleY = 0;
+            this.lottieBefore.goToAndStop(0);
           }
+        }
+        this.pullDownStyle = `top:${Math.min(pos.y + this.pullDownInitTop, 0)}px`;
         if (this.isRebounding) {
-          this.pullDownStyle = `top:${10 - (this.pullDownRefresh.stop || 40 - pos.y)}px`;
+          this.pullDownStyle = `top:${0 - (this.pullDownRefresh.stop || 40 - pos.y)}px`;
         }
       });
     },
@@ -333,16 +357,14 @@ export default {
 
   .pulldown-wrapper {
     position: absolute;
-    width: 100%;
-    left: 0;
+    left: 60px;
+    right: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all;
-
-    .after-trigger {
-      margin-top: 10px;
-    }
+    width: 630px;
+    height: 168px;
   }
 
   .pullup-wrapper {

 <template>
   <LayoutApp class="ufo-font" :class="classes">
-    <ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" @pullingUp="onPullingUp">
+    <ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" @pullingUp="onPullingUp" @pullingDown="onPullingDown">
       <div class="order-page">
         <div class="title">出售中</div>
         <div class="product">
@@ -86,6 +86,11 @@ export default {
       }
       this.$refs.scroll.forceUpdate();
     },
+    onPullingDown() {
+      setTimeout(() => {
+        this.$refs.scroll.forceUpdate();
+      }, 2000);
+    },
     onChangePrice(skc) {
       this.$refs.modalPrice.show({skc, product: this.productInfo});
     },