virtual-scroll-list

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

Useage

Init

1pnpm add virtual-scroll-list-liudingkang

1import { createApp } from 'vue'
2import App from './App.vue'
3import Comps from 'virtual-scroll-list-liudingkang'
4import 'virtual-scroll-list-liudingkang/es/style.css'
5
6createApp(App).use(Comps).mount('#app')
7

Demo

1<script setup lang="ts">
2  const genText = (base = 15) => {
3    const times = base + Math.ceil((Math.random() - 0.5) * base);
4    return Array(times)
5      .fill(1)
6      .map(() => 'every')
7      .join(' ');
8  };
9  const mockData = (num = 20) => {
10    let data = [];
11    for (let index = 0; index < num; index++) {
12      const times = 30 + Math.ceil((Math.random() - 0.5) * 30);
13      data.push(genText(times));
14    }
15    return data;
16  };
17  const data = mockData(5000);
18</script>
19
20<template>
21  <LdkDynamicList
22    :item-size="70"
23    item-class="item"
24    :width="300"
25    :height="300"
26    :data="data"
27  >
28    <template #default="{ item, index }">
29      <div :class="['list-item', index % 2 ? 'list-item-odd' : 'list-item-even']">
30        {{ item }}
31      </div>
32    </template>
33  </LdkDynamicList>
34</template>
35
36<style scoped>
37  .list-item {
38    display: flex;
39    justify-content: center;
40    align-items: center;
41  }
42
43  .list-item-odd {
44    background-color: rgb(229 178 38);
45  }
46
47  .list-item-even {
48    background-color: cadetblue;
49  }
50</style>

Attributes

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

Events

Name	Description	Type
load	达到加载阈值时触发的事件	Function