throttle of scrolling

Author: staticdeng

example/src/App.vue

@@ -73,7 +73,7 @@ export default {
     },
 
     fetch() {
-      for (let i = 0; i < 15; i++) {
+      for (let i = 0; i < 10; i++) {
         this.list.push(this.list.length + 1);
       }
       this.page++;

lib/index.js

@@ -1,6 +1,6 @@
 {
   "name": "vuejs-loadmore",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A pull-down refresh and pull-up loadmore scroll component for Vue.js",
   "entry": "packages/index.js",
   "main": "lib/index.js",

lib/index.module.js

@@ -11,7 +11,7 @@ $refresh-head-text-color: $gray-1;
 // loadmore
 $loadmore-text-color: $gray-1;
 $loadmore-text-font-size: $font-size-md;
-$loadmore-text-line-height: 40px;
+$loadmore-text-line-height: 30px;
 // icon
 $padding-base: 4px;
 $loading-spinner-color: $gray-2;

package.json

@@ -1,7 +1,7 @@
 // get nearest scroll element
 const overflowScrollReg = /scroll|auto/i;
 
-// 遍历父级返回最近一个可滚动的父级元素(overflow-y: auto的元素)，找不到则为window(不能为html,body)
+// 遍历父级返回最近一个可滚动的父级元素(overflow-y: scroll和auto的元素)，找不到则为window(不能为html,body)
 export function getScroller (el, root = window) {
   let node = el;
 

packages/style/var.scss

@@ -0,0 +1,39 @@
+/**
+ * 节流函数
+ */
+
+export function throttle (handle, wait) {
+  var now, previous, timer, context, args;
+
+  var execute = function () {
+    handle.apply(context, args);
+    previous = now;
+  };
+
+  return function () {
+    context = this;
+    args = arguments;
+
+    now = Date.now();
+
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+
+    if (previous) {
+      var diff = wait - (now - previous);
+      if (diff < 0) {
+        // 第一次触发可以立即响应
+        execute();
+      } else {
+        // 结束触发后也能有响应
+        timer = setTimeout(() => {
+          execute();
+        }, diff);
+      }
+    } else {
+      execute();
+    }
+  };
+};

packages/utils/scroll.js

@@ -27,6 +27,7 @@
 }
 
 .vuejs-loadmore {
+  height: $loadmore-text-line-height;
   &-loading,
   &-finished-text,
   &-error-text {
@@ -35,9 +36,4 @@
     line-height: $loadmore-text-line-height;
     text-align: center;
   }
-
-  &-placeholder {
-    height: 0;
-    pointer-events: none;
-  }
 }

packages/utils/throttle.js

@@ -20,7 +20,8 @@
       <slot></slot>
 
       <!-- 上拉加载 -->
-      <div class="vuejs-loadmore">
+      <div class="vuejs-loadmore" ref="placeholder">
+
         <div class="vuejs-loadmore-loading" v-if="loadLoading && !finished && !error">
           <Loading>{{ loadingText || t(`loadmore.loading`) }}</Loading>
         </div>
@@ -33,7 +34,6 @@
           {{ errorText || t(`loadmore.error`) }}
         </div>
 
-        <div ref="placeholder" class="vuejs-loadmore-placeholder" />
       </div>
     </div>
   </div>
@@ -47,6 +47,7 @@ import { TimeoutMixin } from '../mixins/timer';
 // utils
 import { preventDefault } from '../utils/event';
 import { getScroller, getScrollTop } from '../utils/scroll';
+import { throttle } from '../utils/throttle';
 import locale from '../locale';
 // Icon
 import Loading from '../icon';
@@ -62,7 +63,8 @@ export default {
         this.scroller = getScroller(this.$el);
       }
 
-      bind(this.scroller, 'scroll', this.checkSroll);
+      // scroll节流
+      bind(this.scroller, 'scroll', throttle(this.checkSroll, 200));
     }),
     TimeoutMixin
   ],
@@ -286,9 +288,8 @@ export default {
         }
 
         const placeholderRect = this.$refs.placeholder.getBoundingClientRect();
-        const bottomDistance = placeholderRect.bottom - scrollerRect.bottom;
-        // placeholderRect在scrollerRect外面而不是里面(>0)，并且在底部位置(<= loadOffset)
-        const bottomReached = bottomDistance > 0 && bottomDistance <= loadOffset;
+        // 取绝对值，placeholderRect在scrollerRect容器的正负loadOffset区间则达到底部
+        const bottomReached = Math.abs(placeholderRect.bottom - scrollerRect.bottom) <= loadOffset;
 
         if (bottomReached) {
           this.loadLoading = true;