教程
安装#
npm#
# Vue3
npm i --save @virtual-list/vue
# Vue2
npm i --save @virtual-list/vue @vue/composition-api
CDN#
引入#
// vue3
import VirtualList from '@virtual-list/vue'
// vue2
import VirtualList from '@virtual-list/vue/vue2'
props#
items#
类型:
Array as PropType<any[]>要显示的数组数据.
disabled#
- 类型: Boolean
- 禁用. 禁用时, 列表项将全部渲染.
horizontal#
- 类型: Boolean
- 横向显示.
firstRender#
- 类型: Number. 默认: 10
- 初始渲染条数. 用于 ssr
buffer#
- 类型: Number. 默认: 100
- 缓冲距离. 超出滚动盒的可显示距离.
itemKey#
- 类型:
[String, Function] as PropType< "index" | ((item: any, index: number) => any) > - 设置每项的 key. 默认没有 key. 可以是
index, 代表用数组 index 作 key. 也可以是一个返回 key 的方法.
table#
- 类型: Boolean
- 表格模式.
itemSize#
- 类型:
Function as PropType< (item: any, index: number) => number | null | undefined | void > - 返回每项的高度或宽度(横向显示时). 不推荐使用, 因为会自动获取实时尺寸.
例子#
受本站全局 css 影响, 例子的样式与实际样式有细微差别.
横向#
ITEM: 0 - Item 0
ITEM: 1 - Item 1
ITEM: 2 - Item 2
ITEM: 3 - Item 3
ITEM: 4 - Item 4
ITEM: 5 - Item 5
ITEM: 6 - Item 6
ITEM: 7 - Item 7
ITEM: 8 - Item 8
ITEM: 9 - Item 9
ITEM: 10 - Item 10
ITEM: 11 - Item 11
ITEM: 12 - Item 12
ITEM: 13 - Item 13
纵向#
ITEM: 0 - Item 0
ITEM: 1 - Item 1
ITEM: 2 - Item 2
ITEM: 3 - Item 3
ITEM: 4 - Item 4
ITEM: 5 - Item 5
ITEM: 6 - Item 6
ITEM: 7 - Item 7
ITEM: 8 - Item 8
ITEM: 9 - Item 9
ITEM: 10 - Item 10
ITEM: 11 - Item 11
ITEM: 12 - Item 12
ITEM: 13 - Item 13
ITEM: 14 - Item 14
ITEM: 15 - Item 15
ITEM: 16 - Item 16
ITEM: 17 - Item 17
ITEM: 18 - Item 18
ITEM: 19 - Item 19
ITEM: 20 - Item 20
ITEM: 21 - Item 21
ITEM: 22 - Item 22
ITEM: 23 - Item 23
ITEM: 24 - Item 24
ITEM: 25 - Item 25
ITEM: 26 - Item 26
ITEM: 27 - Item 27
表格#
| Text | Index |
|---|---|
| 0 | ITEM: 0 - Item 0 |
| 1 | ITEM: 1 - Item 1 |
| 2 | ITEM: 2 - Item 2 |
| 3 | ITEM: 3 - Item 3 |
| 4 | ITEM: 4 - Item 4 |
| 5 | ITEM: 5 - Item 5 |
| 6 | ITEM: 6 - Item 6 |
| 7 | ITEM: 7 - Item 7 |
| 8 | ITEM: 8 - Item 8 |
| 9 | ITEM: 9 - Item 9 |
| 10 | ITEM: 10 - Item 10 |
| 11 | ITEM: 11 - Item 11 |
| 12 | ITEM: 12 - Item 12 |
| 13 | ITEM: 13 - Item 13 |
| 14 | ITEM: 14 - Item 14 |
| 15 | ITEM: 15 - Item 15 |
| 16 | ITEM: 16 - Item 16 |
| 17 | ITEM: 17 - Item 17 |
| 18 | ITEM: 18 - Item 18 |
| 19 | ITEM: 19 - Item 19 |