update

.github/workflows/publish.yml

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

README.md

@@ -55,7 +55,7 @@ app.use(VueVirtualWaterfall)
 | contentMaxWidth    | string or number                         | '100%'                              | 内容最大宽度            |
 | preloadScreenCount | number                                   | 1                                   | 预加载屏数量          |
 | bottomDistance     | number                                   | 2000                                | 距离底部多少时触发加载更多事件 |
-| itemMinWidth       | number                                   | 320                                 | 每个item最小宽度      |
+| itemMinWidth       | number                                   | 280                                 | 每个item最小宽度      |
 | loading            | boolean                                  | false                               | 是否正在加载数据        |
 | items              | any[]                                    | []                                  | 数据              |
 | calcItemHeight     | (item: any, itemWidth: number) => number | (item: any, itemWidth: number) => 0 | 计算item高度的方法     |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.2-beta.1",
+  "version": "0.0.2-beta.2",
   "author": "lhlyu",
   "repository": {
     "type": "git",

src/App.vue

@@ -2,7 +2,7 @@
     <main>
         <VirtualWaterfall :items="data.items" :calcItemHeight="calcItemHeight" :loading="data.loading" contentMaxWidth="1000px" ref="vw" @load-more="loadMoreData">
             <template #default="{ item }">
-                <Card :id="item.id" :img="item.img"></Card>
+                <Card :id="item.id" :img="item.img" :has="loadedItemIds.has(item.id)" @loaded="loaded"></Card>
             </template>
         </VirtualWaterfall>
     </main>
@@ -22,12 +22,19 @@ interface ItemOption {
 }
 
 const data = reactive({
-    items: [],
+    items: [] as ItemOption[],
     page: 1,
     size: 80,
     loading: false
 })
 
+const loadedItemIds = new Set<string>()
+
+const loaded = (id: string) => {
+    loadedItemIds.add(id)
+}
+
+
 const loadMoreData = async () => {
     if (data.loading) {
         return

src/card.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <img :class="{ 'img-loaded': loaded }" :src="img" :alt="id" loading="lazy" @load="loaded = true" />
+        <img :class="{ 'img-loaded': loaded }" :src="img" :alt="id" loading="lazy" @load="handlerLoad" />
     </div>
 </template>
 
@@ -15,10 +15,24 @@ const props = defineProps({
     img: {
         type: String,
         default: ''
+    },
+    has: {
+        type: Boolean,
+        default: false
     }
 })
 
-const loaded = ref(false)
+const loaded = ref(props.has)
+
+const emit = defineEmits(['loaded'])
+
+const handlerLoad = () => {
+    if (props.has) {
+        return
+    }
+    loaded.value = true
+    emit('loaded', props.id)
+}
 </script>
 
 <style scoped lang="scss">

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

@@ -60,7 +60,7 @@ const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
     preloadScreenCount: 1,
     bottomDistance: 2000,
     contentMaxWidth: '100%',
-    itemMinWidth: 320,
+    itemMinWidth: 280,
     loading: false,
     items: () => [],
     calcItemHeight: (item: any, itemWidth: number) => 0