feat: 优化到达顶部底部的判断

Author: kolarorz

docs/demos/chat/Main.vue

@@ -91,9 +91,8 @@ export default {
   },
   methods: {
     async toTop() {
-      console.log('toTop');
       if (this.loading || this.page <= 1) return;
-
+      console.log('toTop');
       this.loading = true;
 
       const list = await asyncGetList(

docs/demos/infinity/Main.vue

@@ -68,6 +68,7 @@ export default {
   data() {
     return {
       visible: true,
+      loading: false,
       list: [] as any[],
       reactiveData: {
         renderBegin: 0,
@@ -83,9 +84,12 @@ export default {
   },
   methods: {
     async toBottom() {
+      if (this.loading) return;
       console.log('toBottom');
+      this.loading = true;
       const list = await asyncGetList(200, this.list.length, 1000);
       this.list = this.list.concat(list);
+      this.loading = false;
     },
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virt-list",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "description": "Tiny & Virtual scroll list & Huge amount data & High performance (support vue2.x&vue3.x)",
   "author": "kolarorz",
   "license": "MIT",

src/components/virt-list/index.tsx

@@ -407,6 +407,26 @@ function useVirtList<T extends Record<string, any>>(
     }
   }
 
+  function judgePosition() {
+    // 使用2px作为误差范围
+    const threshold = Math.max(props.scrollDistance, 2);
+
+    if (direction === 'forward') {
+      if (reactiveData.offset - threshold <= 0) {
+        // console.log('[VirtList] 到达顶部');
+        emitFunction?.toTop?.(props.list[0]);
+      }
+    } else if (direction === 'backward') {
+      // 使用一个 Math.round 来解决小数点的误差问题
+      const scrollSize = Math.round(reactiveData.offset + slotSize.clientSize);
+      const distanceToBottom = Math.round(getTotalSize() - scrollSize);
+      if (distanceToBottom <= threshold) {
+        // console.log('[VirtList] 到达底部');
+        emitFunction?.toBottom?.(props.list[props.list.length - 1]);
+      }
+    }
+  }
+
   function onScroll(evt: Event) {
     // console.log('onscroll');
 
@@ -420,26 +440,7 @@ function useVirtList<T extends Record<string, any>>(
 
     calcRange();
 
-    // 到达顶部
-    if (
-      direction === 'forward' &&
-      reactiveData.offset - props.scrollDistance <= 0
-    ) {
-      // console.log('[VirtList] 到达顶部');
-      emitFunction?.toTop?.(props.list[0]);
-    }
-    // 到达底部 - 放在这里是为了渲染完成拿到真是高度了，再判断是否是真的到达底部
-    // 使用一个 Math.round 来解决小数点的误差问题
-    if (
-      direction === 'backward' &&
-      Math.round(reactiveData.offset + props.scrollDistance) >=
-        Math.round(
-          reactiveData.listTotalSize + getSlotSize() - slotSize.clientSize,
-        )
-    ) {
-      // console.log('[VirtList] 到达底部');
-      emitFunction?.toBottom?.(props.list[props.list.length - 1]);
-    }
+    judgePosition();
   }
 
   function calcViews() {