1.0.1

.github/workflows/publish.yml

@@ -3,7 +3,7 @@ name: Publish Package
 on:
   push:
     branches:
-      - dev
+      - main
 
 jobs:
   publish:

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.0.1
+
+### fix
+
+- virtual list bug | 虚拟列表漏洞
+
 ## 1.0.0
 
 ### Breaking Changes (破坏性更新)

README.md

@@ -55,7 +55,7 @@ app.use(VueVirtualWaterfall)
 | virtual            | boolean                                    | true                                    | Enable virtual list                   |
 | rowKey             | string                                     | 'id'                                    | Key for v-for                         |
 | gap                | number                                     | 15                                      | Gap between each item                 |
-| preloadScreenCount | `[number, number]`                         | `[1, 0]`                                | Preload screen count `[above, below]` |
+| preloadScreenCount | `[number, number]`                         | `[0, 0]`                                | Preload screen count `[above, below]` |
 | itemMinWidth       | number                                     | 220                                     | Minimum width for each item           |
 | maxColumnCount     | number                                     | 10                                      | Maximum number of columns             |
 | minColumnCount     | number                                     | 2                                       | Minimum number of columns             |

README.zh.md

@@ -55,7 +55,7 @@ app.use(VueVirtualWaterfall)
 | virtual            | boolean                                    | true                                    | 是否启用虚拟列表                  |
 | rowKey             | string                                     | 'id'                                    | v-for需要用到key              |
 | gap                | number                                     | 15                                      | 每个item之间的间隔               |
-| preloadScreenCount | `[number, number]`                         | `[1:0]`                                 | 预加载屏数量`[上面预加载屏数，下面预加载屏数]` |
+| preloadScreenCount | `[number, number]`                         | `[0:0]`                                 | 预加载屏数量`[上面预加载屏数，下面预加载屏数]` |
 | itemMinWidth       | number                                     | 220                                     | 每个item最小宽度                |
 | maxColumnCount     | number                                     | 10                                      | 允许的最大列数                   |
 | minColumnCount     | number                                     | 2                                       | 允许的最小列数                   |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
-    "vue": "^3.3.11",
+    "vue": "^3.3.12",
     "vue-tsc": "^1.8.25"
   }
 }

src/example/Example.vue

@@ -75,7 +75,9 @@
                 </div>
             </div>
             <div class="form-group form-group-sm mb-2">
-                <label class="form-label fs-6">最小列数 <code>[0:{{ waterfallOption.maxColumnCount }}]</code>，最大列数 <code>[{{ waterfallOption.minColumnCount }}:10]</code></label>
+                <label class="form-label fs-6"
+                    >最小列数 <code>[0:{{ waterfallOption.maxColumnCount }}]</code>，最大列数 <code>[{{ waterfallOption.minColumnCount }}:10]</code></label
+                >
                 <div class="input-group input-group-sm">
                     <input
                         type="number"
@@ -101,7 +103,7 @@
                     <span
                         class="input-group-text"
                         id="basic-addon1"
-                    >列</span
+                        >列</span
                     >
                 </div>
             </div>
@@ -144,6 +146,7 @@
             </div>
             <div class="form-group form-group-sm mb-2">
                 <label class="form-label fs-6">数据展示</label>
+                <p>每页条数: {{ data.size }}</p>
                 <p>当前页码: {{ data.page }} / {{ data.max }}</p>
                 <p>已加载量: {{ data.list.length }} / {{ data.total }}</p>
                 <p>等待加载: {{ waterfallOption.loading }}</p>

src/example/useWaterfall.ts

@@ -55,7 +55,7 @@ const useWaterfall = () => {
         bottomDistance: 0,
         // 是否只展示图片，这是自定义加的一个属性
         onlyImage: false,
-        topPreloadScreenCount: 1,
+        topPreloadScreenCount: 0,
         bottomPreloadScreenCount: 0,
         virtual: true,
         gap: 15,
@@ -78,7 +78,7 @@ const useWaterfall = () => {
     // 需要展示数据的属性
     const data = reactive({
         page: 0,
-        size: 40,
+        size: 30,
         total: 0,
         max: 0,
         list: [] as ItemOption[],
@@ -134,9 +134,10 @@ const useWaterfall = () => {
         measure()
         if (arrivedState['bottom']) {
             if (!promise.value) {
-                promise.value = Promise.all([loadData(), new Promise(resolve => setTimeout(resolve, 100))]).finally(() => {
+                promise.value = Promise.all([loadData(), new Promise(resolve => setTimeout(resolve, 100))]).finally(async () => {
                     promise.value = null
-                    nextTick(() => checkAndLoad())
+                    await nextTick()
+                    checkAndLoad()
                 })
             }
         }

src/vue-virtual-waterfall/virtual-waterfall.vue

@@ -60,7 +60,7 @@ const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
     virtual: true,
     rowKey: 'id',
     gap: 15,
-    preloadScreenCount: () => [1, 0],
+    preloadScreenCount: () => [0, 0],
     itemMinWidth: 220,
     maxColumnCount: 10,
     minColumnCount: 2,
@@ -120,6 +120,7 @@ interface SpaceOption {
     column: number
     top: number
     left: number
+    bottom: number
     height: number
 }
 
@@ -154,13 +155,14 @@ watchEffect(() => {
         const columnIndex = getColumnIndex()
         // 计算元素的高度
         const h = props.calcItemHeight(props.items[i], itemWidth.value)
-
+        const top = columnsTop.value[columnIndex]
         const space: SpaceOption = {
             index: i,
             item: props.items[i],
             column: columnIndex,
-            top: columnsTop.value[columnIndex],
+            top: top,
             left: (itemWidth.value + props.gap) * columnIndex + props.gap,
+            bottom: top + h,
             height: h
         }
 
@@ -180,33 +182,29 @@ const itemRenderList = computed<SpaceOption[]>(() => {
     if (!props.virtual) {
         return itemSpaces.value
     }
-    const tp = -contentTop.value
+
+    // 父节点距离顶部的距离
+    const parentTop = content.value.parentElement.offsetTop
+
+    const tp = -contentTop.value + parentTop
 
     const [topPreloadScreenCount, bottomPreloadScreenCount] = props.preloadScreenCount
     // 避免多次访问
     const innerHeight = content.value.parentElement.clientHeight
+
     // 顶部的范围: 向上预加载preloadScreenCount个屏幕，Y轴上部
     const topLimit = tp - topPreloadScreenCount * innerHeight
     // 底部的范围: 向下预加载preloadScreenCount个屏幕
     const bottomLimit = tp + (bottomPreloadScreenCount + 1) * innerHeight
 
     const list = []
 
-    // 判断是否已经筛选到了数据
-    let open = false
-
     for (let i = 0; i < length; i++) {
-        // AND 运算比 OR 运算快
-        if (itemSpaces.value[i].top > topLimit && itemSpaces.value[i].top < bottomLimit) {
-            open = true
+        if ((itemSpaces.value[i].top >= topLimit || itemSpaces.value[i].bottom >= topLimit) && (itemSpaces.value[i].top <= bottomLimit || itemSpaces.value[i].bottom <= bottomLimit)) {
             list.push(itemSpaces.value[i])
-            continue
-        }
-        // 后面的不用再遍历了
-        if (open) {
-            break
         }
     }
+
     return list
 })
 

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     /* Bundler mode */