[improvement] List: optimization boundary judgment logic (#3450)

packages/list/index.js

@@ -1,12 +1,7 @@
 import { use } from '../utils';
 import Loading from '../loading';
 import { BindEventMixin } from '../mixins/bind-event';
-import {
-  getScrollTop,
-  getElementTop,
-  getVisibleHeight,
-  getScrollEventTarget
-} from '../utils/dom/scroll';
+import { getScrollEventTarget } from '../utils/dom/scroll';
 
 const [sfc, bem, t] = use('list');
 
@@ -68,9 +63,19 @@ export default sfc({
         return;
       }
 
-      const el = this.$el;
-      const { scroller } = this;
-      const scrollerHeight = getVisibleHeight(scroller);
+      const { $el: el, scroller, offset, direction } = this;
+      let scrollerRect;
+
+      if (scroller.getBoundingClientRect) {
+        scrollerRect = scroller.getBoundingClientRect();
+      } else {
+        scrollerRect = {
+          top: 0,
+          bottom: scroller.innerHeight
+        };
+      }
+
+      const scrollerHeight = scrollerRect.bottom - scrollerRect.top;
 
       /* istanbul ignore next */
       if (
@@ -78,32 +83,19 @@ export default sfc({
         window.getComputedStyle(el).display === 'none' ||
         el.offsetParent === null
       ) {
-        return;
+        return false;
       }
 
-      const { offset, direction } = this;
+      let isReachEdge = false;
+      const placeholderRect = this.$refs.placeholder.getBoundingClientRect();
 
-      function isReachEdge() {
-        if (el === scroller) {
-          const scrollTop = getScrollTop(el);
-
-          if (direction === 'up') {
-            return scrollTop <= offset;
-          }
-
-          const targetBottom = scrollTop + scrollerHeight;
-          return scroller.scrollHeight - targetBottom <= offset;
-        }
-
-        if (direction === 'up') {
-          return getScrollTop(scroller) - getElementTop(el) <= offset;
-        }
-
-        const elBottom = getElementTop(el) + getVisibleHeight(el) - getElementTop(scroller);
-        return elBottom - scrollerHeight <= offset;
+      if (direction === 'up') {
+        isReachEdge = placeholderRect.top - scrollerRect.top <= offset;
+      } else {
+        isReachEdge = placeholderRect.bottom - scrollerRect.bottom <= offset;
       }
 
-      if (isReachEdge()) {
+      if (isReachEdge) {
         this.$emit('input', true);
         this.$emit('load');
       }
@@ -116,9 +108,11 @@ export default sfc({
   },
 
   render(h) {
+    const placeholder = <div ref="placeholder" class={bem('placeholder')}/>;
+
     return (
       <div class={bem()} role="feed" aria-busy={this.loading}>
-        {this.direction === 'down' && this.slots()}
+        {this.direction === 'down' ? this.slots() : placeholder}
         {this.loading && (
           <div class={bem('loading')} key="loading">
             {this.slots('loading') || (
@@ -134,7 +128,7 @@ export default sfc({
             {this.errorText}
           </div>
         )}
-        {this.direction === 'up' && this.slots()}
+        {this.direction === 'up' ? this.slots() : placeholder}
       </div>
     );
   }