feat: 无限滚动新增 scrollChange、use-capture、use-window

src/packages/infiniteloading/doc.md

@@ -16,7 +16,7 @@
             class="list-item" 
             v-for="(item, index) of data" 
             :key="item"
-        >我是测试数据{{index + 1}}</li>
+        >我是测试数据{{index + 1} }</li>
     </ul>
 </nut-infiniteloading>
 ```
@@ -57,13 +57,17 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
-| hasMore | 是否还有更多数据 | Boolean | true
-| isLoading | 是否加载中 | Boolean | false
+| has-more | 是否还有更多数据 | Boolean | true
+| is-loading | 是否加载中 | Boolean | false
 | threshold | 距离底部多远加载 | Number | 200
-| isShowMod | 是否展示懒加载模块内容，一般适用于选项卡切换 | Boolean | false
+| is-showMod | 是否展示懒加载模块内容，一般适用于选项卡切换 | Boolean | false
+| use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | true
+| use-capture | 是否使用捕获模式 true捕获 false冒泡 | Boolean | false
+| unload-more-txt | 没有更多数据展示文案 | String | 哎呀，这里是底部了啦
 
 ## Event
 
 | 字段 | 说明 | 回调参数
 |----- | ----- | -----
 | loadmore | 继续加载的回调函数 | -
+| scrollChange | 实时监听滚动高度 | 滚动高度

src/packages/infiniteloading/infiniteloading.vue

@@ -10,7 +10,7 @@
                 <template v-if="isLoading" >
                    <i class="loading-hint"></i><span class="loading-txt">加载中...</span>
                 </template>
-                <span v-else-if="!hasMore" class="tips-txt">哎呀，这里是底部了啦</span>
+                <span v-else-if="!hasMore" class="tips-txt">{{unloadMoreTxt}}</span>
             </div>
         </div>
     </div>
@@ -35,9 +35,20 @@ export default {
             type: Boolean,
             default: true
         },
+        useCapture: {
+            type: Boolean,
+            default: false
+        },
         isShowMod: {
             type: Boolean,
             default: false
+        },
+        unloadMoreTxt: {
+            type: String,
+            default: "哎呀，这里是底部了啦"
+        },
+        scrollChange:{
+            type:Function
         }
     },
     data() {
@@ -51,6 +62,12 @@ export default {
     },
 
     mounted: function () {
+        const parentElement = this.getParentElement(this.$el);
+        let scrollEl = window;
+        if (this.useWindow === false) {
+            scrollEl = parentElement;
+        }
+        this.scrollEl = scrollEl;
         this.scrollListener();
     },
 
@@ -69,10 +86,12 @@ export default {
             this.diffX = endX - this.startX;
             this.diffY = endY - this.startY;
         },
-
+         getParentElement(el) {
+            return el && el.parentNode;
+        },
         scrollListener() {
-            window.addEventListener('scroll', this.handleScroll, false);
-            window.addEventListener('resize', this.handleScroll, false);
+            this.scrollEl.addEventListener('scroll', this.handleScroll, this.useCapture);
+            window.addEventListener('resize', this.handleScroll, this.useCapture);
         },
 
         requestAniFrame() {
@@ -113,7 +132,10 @@ export default {
         isScrollAtBottom() {
             let offsetDistance;
             
+            let resScrollTop = 0;
+
             const windowScrollTop = this.getWindowScrollTop();
+
             if (this.useWindow) {
                 offsetDistance =
                     this.calculateTopPosition(this.$refs.scroller) +
@@ -124,10 +146,12 @@ export default {
                     scrollHeight,
                     clientHeight,
                     scrollTop
-                } = this.$refs.scroller;
+                } = this.scrollEl;
+
                 offsetDistance = scrollHeight - clientHeight - scrollTop;
+                resScrollTop = scrollTop;
             }
-            
+            this.$emit('scrollChange',windowScrollTop || resScrollTop);
             // 保证是往下滑动的
             let beforeScrollTop = this.beforeScrollTop;
             this.beforeScrollTop = windowScrollTop;
@@ -145,13 +169,13 @@ export default {
 
     deactivated() {
         this.keepAlive = true;
-        window.removeEventListener('scroll', this.handleScroll, false);
-        window.removeEventListener('resize', this.handleScroll, false);
+        this.scrollEl.removeEventListener('scroll', this.handleScroll, this.useCapture);
+        window.removeEventListener('resize', this.handleScroll, this.useCapture);
     },
 
     destroyed() {
-        window.removeEventListener('scroll', this.handleScroll, false);
-        window.removeEventListener('resize', this.handleScroll, false);
+        this.scrollEl.removeEventListener('scroll', this.handleScroll, this.useCapture);
+        window.removeEventListener('resize', this.handleScroll, this.useCapture);
     }
 }
 </script>