1.0.6 • Published 10 months ago

@lhlyu/vue-virtual-waterfall v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

vue-virtual-waterfall

一款vue3虚拟瀑布流组件

npm

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="item.img" />
            </div>
        </template>
    </VirtualWaterfall>
</template>
  • Nuxt3中使用

例子

注意!!!

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

文档

  • 属性
字段类型默认值说明
virtualbooleantrue是否启用虚拟列表
rowKeystring'id'v-for需要用到key
gapnumber15每个item之间的间隔
paddingnumber or string15 or '15px 15px'容器内边距
preloadScreenCount[number, number][0:0]预加载屏数量[上面预加载屏数,下面预加载屏数]
itemMinWidthnumber220每个item最小宽度
maxColumnCountnumber10允许的最大列数
minColumnCountnumber2允许的最小列数
itemsany[][]数据
calcItemHeight(item: any, itemWidth: number) => number(item: any, itemWidth: number) => 250计算item高度的方法
  • 插槽
事件类型说明
default{ item: any, index: number }自定义默认内容
1.0.6

10 months ago

1.0.6-beta.4

11 months ago

1.0.6-beta.1

12 months ago

1.0.6-beta.0

12 months ago

1.0.6-beta.3

12 months ago

1.0.6-beta.2

12 months ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.0-alpha.1

2 years ago

1.0.0-alpha.0

2 years ago

1.0.0-beta.0

2 years ago

1.0.0-beta.1

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.14-beta.0

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.8-beta.1

2 years ago

0.0.8-beta.0

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.6-beta.0

2 years ago

0.0.5

2 years ago

0.0.5-beta.7

2 years ago

0.0.5-beta.6

2 years ago

0.0.5-beta.4

2 years ago

0.0.5-beta.3

2 years ago

0.0.5-beta.2

2 years ago

0.0.5-beta.1

2 years ago

0.0.5-beta.0

2 years ago

0.0.4

2 years ago

0.0.4-beta.0

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.2-beta.2

2 years ago

0.0.2-beta.1

2 years ago

0.0.2-beta.0

2 years ago

0.0.1

2 years ago

0.0.1-beta.8

2 years ago

0.0.1-beta.7

2 years ago

0.0.1-beta.6

2 years ago

0.0.1-beta.5

2 years ago

0.0.1-beta.4

2 years ago

0.0.1-beta.3

2 years ago

0.0.1-beta.2

2 years ago

0.0.1-beta.1

2 years ago

0.0.1-beta.0

2 years ago