Is a virtual-scroll-list developed based on Vue3.
- 💪 90%+ Unit test coverage
- 💪 Written in TypeScript
- 🍭 Support
DynamicList
and FixedSizeList
- 🍭 Support Tree Shaking
- 🍭 Support import on demand
- 🍭 Support auto-import and provide a solver
pnpm add virtual-scroll-list-liudingkang
import { createApp } from 'vue'
import App from './App.vue'
import Comps from 'virtual-scroll-list-liudingkang'
import 'virtual-scroll-list-liudingkang/es/style.css'
createApp(App).use(Comps).mount('#app')
<script setup lang="ts">
const genText = (base = 15) => {
const times = base + Math.ceil((Math.random() - 0.5) * base);
return Array(times)
.fill(1)
.map(() => 'every')
.join(' ');
};
const mockData = (num = 20) => {
let data = [];
for (let index = 0; index < num; index++) {
const times = 30 + Math.ceil((Math.random() - 0.5) * 30);
data.push(genText(times));
}
return data;
};
const data = mockData(5000);
</script>
<template>
<LdkDynamicList
:item-size="70"
item-class="item"
:width="300"
:height="300"
:data="data"
>
<template #default="{ item, index }">
<div :class="['list-item', index % 2 ? 'list-item-odd' : 'list-item-even']">
{{ item }}
</div>
</template>
</LdkDynamicList>
</template>
<style scoped>
.list-item {
display: flex;
justify-content: center;
align-items: center;
}
.list-item-odd {
background-color: rgb(229 178 38);
}
.list-item-even {
background-color: cadetblue;
}
</style>
Name |
Description |
Type |
Default |
Other |
itemSize |
每一项的高度 |
number |
70 |
单位为px |
itemClass |
每一项的自定义 class |
string |
|
|
itemKey |
每一项的 key |
string/number |
id |
|
data |
数据 |
any |
[] |
|
width |
可视区域宽度 |
number/string |
100% |
|
height |
可视区域高度 |
number/string |
300 |
当是 number 时单位为px |
cache |
上下缓冲数量 |
number |
2 |
单位为px |
distance |
触底加载阈值 |
number |
0 |
单位为px |
Name |
Description |
Type |
load |
达到加载阈值时触发的事件 |
Function |