Merge remote-tracking branch 'origin/release/4.0' into feature/new-category

@@ -16,6 +16,12 @@
 <script>
 export default {
     name: 'Scroller',
+    props: {
+        topDistance: {
+            type: Number,
+            default: 50
+        }
+    },
     data() {
         return {
             distance: 0,
@@ -54,7 +60,7 @@ export default {
             this.startY = e.touches[0].clientY;
             if (this.$el.scrollTop === 0) {
                 this.transition = false;
-                this.topStatus = '';
+                this.topStatus = 'pull';
             }
         },
         touchmove(e) {
@@ -63,9 +69,9 @@ export default {
 
             this.direction = distance > 0 ? 'down' : 'up';
 
-            if (this.direction === 'down' && this.$el.scrollTop === 0) {
+            if (this.direction === 'down' && this.$el.scrollTop === 0 && this.topStatus) {
                 this.distance = distance;
-                if (this.distance > 50) {
+                if (this.distance > this.topDistance) {
                     this.topStatus = 'drag';
                 }
             }
@@ -73,17 +79,18 @@ export default {
         touchend() {
             if (this.direction === 'down' && this.$el.scrollTop === 0) {
                 this.transition = true;
-                if (this.topStatus) {
+                if (this.topStatus === 'drag') {
                     this.styleTop = {
-                        marginTop: '0'
+                        marginTop: '10px'
                     };
-                }
-                if (this.distance > 50 && !this.isLoading) {
-                    this.isLoading = true;
-                    this.$emit('loading');
+                    if (!this.isLoading) {
+                        this.isLoading = true;
+                        this.$emit('loading');
+                    }
                 }
                 this.distance = 0;
             }
+            this.topStatus = '';
         }
     }
 };
@@ -99,18 +106,19 @@ export default {
     overflow-y: auto;
 }
 .scroller-top {
-    width: 87px;
-    height: 66px;
+    width: 43PX;
+    height: 33PX;
     margin: 0 auto;
-    margin-top: -66px;
+    margin-top: -43PX;
+    margin-bottom: 10PX;
     background-image: url(~statics/img/pull_sprite.png);
-    background-position: -2320px 0;
+    background-position: -1160PX 0;
     background-repeat: no-repeat;
-    background-size: 2494px 66px;
-    animation: loadingScroller 1s steps(29) .5s infinite;
+    background-size: 1247PX 33PX;
+    animation: loadingScroller 1.5s steps(29) .5s infinite;
 }
 @keyframes loadingScroller {
     0% { background-position: 0 0; }
-    100% { background-position: -2494px 0; }
+    100% { background-position: -1247PX 0; }
 }
 </style>