1.0.5

Author: lhlyu

README.md

@@ -63,7 +63,7 @@ of the body also needs to be specified. The scrolling event can be bound to the
 | virtual            | boolean                                    | true                                    | Enable virtual list                   |
 | rowKey             | string                                     | 'id'                                    | Key for v-for                         |
 | gap                | number                                     | 15                                      | Gap between each item                 |
-| padding            | number or string                           | 15 or '15px 20px'                       | Container's padding                   |
+| padding            | number or string                           | 15 or '15px 15px'                       | Container's padding                   |
 | 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             |

README.zh.md

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -39,15 +39,15 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
-    "cssnano": "^6.1.1",
+    "cssnano": "^6.1.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-rational-order": "^1.0.3",
-    "sass": "^1.72.0",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.4",
-    "vite-plugin-dts": "^3.7.3",
+    "sass": "^1.74.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-dts": "^3.8.1",
     "vue": "^3.4.21",
-    "vue-tsc": "^2.0.7"
+    "vue-tsc": "^2.0.12"
   }
 }

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

@@ -208,9 +208,7 @@ const itemRenderList = computed<SpaceOption[]>(() => {
     // 底部的范围: 向下预加载preloadScreenCount个屏幕
     const maxLimit = tp + (bottomPreloadScreenCount + 1) * innerHeight
     
-    let start = 0
-    let end = 0
-    let open = true
+    const items = []
     
     for (let i = 0; i < length; i++) {
         const v = itemSpaces.value[i]
@@ -226,15 +224,10 @@ const itemRenderList = computed<SpaceOption[]>(() => {
             (b >= minLimit && b <= maxLimit) ||
             (t < minLimit && b > maxLimit)
         ) {
-            if (open) {
-                start = i
-                open = false
-            }
-            end = i
+            items.push(v)
         }
     }
-    // 测试发现slice方法很快
-    return itemSpaces.value.slice(start, end + 1)
+    return items
 })
 
 // 获取当前元素应该处于哪一列