A Vue 3 virtual waterfall component

中文文档

• Example
• Example Source Code

pnpm add @lhlyu/vue-virtual-waterfall

• Local import

import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'

• Global import

import VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall'

app.use(VueVirtualWaterfall)

• Usage

<template>
    <VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight">
        <template #default="{ item }: { item: ItemOption }">
            <div class="card">
                <img :src="item.img" />
            </div>
        </template>
    </VirtualWaterfall>
</template>

• Nuxt3 Usage

demo

The VirtualWaterfall component wants to implement a virtual list, and the container that wraps it must indicate a fixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height of the body also needs to be specified. The scrolling event can be bound to the window

• Properties

• Slots