Awesome

vue-virtual-waterfall

A Vue 3 virtual waterfall component

中文文档

Example

• Example
• Example Source Code

Usage

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

Attention!!!

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

Documentation

• Properties

• Slots