1.0.2

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.0.2
+
+### fix
+
+- virtual list bug | 虚拟列表漏洞
+
 ## 1.0.1
 
 ### fix

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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.12",
-    "vue-tsc": "^1.8.25"
+    "vue": "^3.3.13",
+    "vue-tsc": "^1.8.26"
   }
 }

src/example/Card.vue

@@ -13,6 +13,18 @@
                     :src="item.url"
                     alt="图片"
                 />
+                <svg v-else width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+                    <g fill="none" fill-rule="evenodd" stroke-width="2">
+                        <circle cx="22" cy="22" r="1">
+                            <animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"></animate>
+                            <animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"></animate>
+                        </circle>
+                        <circle cx="22" cy="22" r="1">
+                            <animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"></animate>
+                            <animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"></animate>
+                        </circle>
+                    </g>
+                </svg>
             </Transition>
         </div>
         <div
@@ -57,8 +69,14 @@ const height = ref('auto')
 onBeforeMount(() => {
     if (!props.noImage) {
         height.value = '100%'
-        new Promise((resolve, reject) => {
+        new Promise((resolve) => {
             const image = new Image()
+            image.src = props.item.url
+            if (image.complete) {
+                loaded.value = true
+                resolve(true)
+                return
+            }
 
             image.onload = () => {
                 loaded.value = true
@@ -70,8 +88,6 @@ onBeforeMount(() => {
                 loaded.value = true
                 resolve(true)
             }
-
-            image.src = props.item.url
         })
     }
 })
@@ -91,6 +107,10 @@ onBeforeMount(() => {
     .cover {
         flex: 1;
         flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #e3e8f7;
         width: 100%;
         height: 100%;
 

src/example/Example.vue

@@ -34,8 +34,9 @@
                     <span
                         class="input-group-text"
                         id="basic-addon1"
-                        >px</span
                     >
+                        px
+                    </span>
                 </div>
             </div>
             <div class="form-group form-group-sm mb-2">
@@ -57,7 +58,7 @@
                 </div>
             </div>
             <div class="form-group form-group-sm mb-2">
-                <label class="form-label fs-6">距离底部多少时加载更多 <code>[0:1000]</code></label>
+                <label class="form-label fs-6">距离底部多少加载更多 <code>[0:10000]</code></label>
                 <div class="input-group input-group-sm">
                     <input
                         type="number"
@@ -183,6 +184,8 @@ body {
     padding-top: 72px;
     background: #f1f2f6;
     user-select: none;
+    scroll-behavior: smooth;
+    overflow: auto;
 }
 header {
     position: fixed;

src/example/useWaterfall.ts

@@ -87,6 +87,9 @@ const useWaterfall = () => {
 
     // 加载更多数据的函数
     const loadData = async () => {
+        if (waterfallOption.loading) {
+            return
+        }
         waterfallOption.loading = true
         if (data.end) {
             waterfallOption.loading = false

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

@@ -193,19 +193,37 @@ const itemRenderList = computed<SpaceOption[]>(() => {
     const innerHeight = content.value.parentElement.clientHeight
 
     // 顶部的范围: 向上预加载preloadScreenCount个屏幕，Y轴上部
-    const topLimit = tp - topPreloadScreenCount * innerHeight
+    const minLimit = tp - topPreloadScreenCount * innerHeight
     // 底部的范围: 向下预加载preloadScreenCount个屏幕
-    const bottomLimit = tp + (bottomPreloadScreenCount + 1) * innerHeight
-
-    const list = []
+    const maxLimit = tp + (bottomPreloadScreenCount + 1) * innerHeight
+    
+    let start = 0
+    let end = 0
+    let open = true
+    
 
     for (let i = 0; i < length; i++) {
-        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])
+        const t = itemSpaces.value[i].top
+        const b = itemSpaces.value[i].bottom
+        // 这里的逻辑是：
+        // 只要元素部分出现在容器里就算作可见，因此有三段判断:
+        // 1. 元素的上边界在容器内
+        // 2. 元素的下边界在容器内
+        // 3. 元素覆盖了整个容器
+        if(
+            (t >= minLimit && t <= maxLimit) ||
+            (b >= minLimit && b <= maxLimit) ||
+            (t < minLimit && b > maxLimit)
+        ) {
+            if (open) {
+                start = i
+                open = false
+            }
+            end = i
         }
     }
-
-    return list
+    // 测试发现slice方法很快
+    return itemSpaces.value.slice(start, end + 1)
 })
 
 // 获取当前元素应该处于哪一列