[new feature] List: add direction prop (#3223)

packages/list/en-US.md

@@ -103,6 +103,7 @@ export default {
 | finished-text | Finished text | `String` | - |
 | error-text | Error loaded text | `String` | - |
 | immediate-check | Whether to check loading position immediately after mounted | `Boolean` | `true` |
+| direction | Scroll direction，can be set to `up` | `String` | `down` |
 
 ### Event
 

packages/list/index.js

@@ -29,6 +29,10 @@ export default sfc({
     offset: {
       type: Number,
       default: 300
+    },
+    direction: {
+      type: String,
+      default: 'down'
     }
   },
 
@@ -74,25 +78,37 @@ export default sfc({
       const scrollerHeight = getVisibleHeight(scroller);
 
       /* istanbul ignore next */
-      if (!scrollerHeight || window.getComputedStyle(el).display === 'none' || el.offsetParent === null) {
+      if (
+        !scrollerHeight ||
+        window.getComputedStyle(el).display === 'none' ||
+        el.offsetParent === null
+      ) {
         return;
       }
 
-      const scrollTop = getScrollTop(scroller);
+      const { offset, direction } = this;
-      const targetBottom = scrollTop + scrollerHeight;
 
-      let reachBottom = false;
+      function isReachEdge() {
+        if (el === scroller) {
+          const scrollTop = getScrollTop(el);
 
-      /* istanbul ignore next */
+          if (direction === 'up') {
-      if (el === scroller) {
+            return scrollTop <= offset;
-        reachBottom = scroller.scrollHeight - targetBottom < this.offset;
+          }
-      } else {
+
-        const elBottom = getElementTop(el) - getElementTop(scroller) + getVisibleHeight(el);
+          const targetBottom = scrollTop + scrollerHeight;
-        reachBottom = elBottom - scrollerHeight < this.offset;
+          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;
       }
 
-      /* istanbul ignore else */
+      if (isReachEdge()) {
-      if (reachBottom) {
         this.$emit('input', true);
         this.$emit('load');
       }
@@ -115,7 +131,7 @@ export default sfc({
   render(h) {
     return (
       <div class={bem()}>
-        {this.slots()}
+        {this.direction === 'down' && this.slots()}
         {this.loading && (
           <div class={bem('loading')} key="loading">
             {this.slots('loading') || [
@@ -132,6 +148,7 @@ export default sfc({
             {this.errorText}
           </div>
         )}
+        {this.direction === 'up' && this.slots()}
       </div>
     );
   }

packages/list/zh-CN.md

@@ -110,6 +110,7 @@ export default {
 | finished-text | 加载完成后的提示文案 | `String` | - | 1.4.7 |
 | error-text | 加载失败后的提示文案 | `String` | - | 1.5.3 |
 | immediate-check | 是否在初始化时立即执行滚动位置检查 | `Boolean` | `true` | - |
+| direction | 滚动触发加载的方向，可选值为`up` | `String` | `down` | 1.6.16 |
 
 ### Event