@lhlyu/vue-virtual-waterfall

vue-virtual-waterfall

一款vue3虚拟瀑布流组件

English Doc

示例

• 例子
• 例子源码

使用

pnpm add @lhlyu/vue-virtual-waterfall

• 局部引用

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

• 全局引用

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

app.use(VueVirtualWaterfall)

• 使用

<template>
    <VirtualWaterfall
        :items="items"
        :calcItemHeight="calcItemHeight"
    >
        <template #default="{ item }: { item: ItemOption }">
            <div class="card">
                <img :src="https://raw.githubusercontent.com/lhlyu/vue-virtual-waterfall/HEAD/item.img" />
            </div>
        </template>
    </VirtualWaterfall>
</template>

• 在Nuxt3中使用

例子

注意!!!

VirtualWaterfall 组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在 window 上

文档

• 属性

• 插槽

• 方法