KVirtualList

A simple virtual list, useful when rendering large amounts of data.

The code implementation of KVirtualList comes from svelte-virtual-scroll-list

Install

pnpm

pnpm add @ikun-ui/virtual-list

yarn

yarn add @ikun-ui/virtual-list

npm

npm install @ikun-ui/virtual-list

Basic usage

Without further ado, please take a look at the demo

this is item 0

this is item 1

this is item 2

this is item 3

this is item 4

this is item 5

this is item 6

this is item 7

this is item 8

this is item 9

this is item 10

this is item 11

this is item 12

this is item 13

this is item 14

this is item 15

this is item 16

this is item 17

this is item 18

this is item 19

this is item 20

this is item 21

this is item 22

this is item 23

this is item 24

this is item 25

this is item 26

this is item 27

this is item 28

this is item 29

Different heights

You can set different heights for item according to your needs.

this is item 0 -- 30px

this is item 1 -- 40px

this is item 2 -- 50px

this is item 3 -- 60px

this is item 4 -- 70px

this is item 5 -- 80px

this is item 6 -- 90px

this is item 7 -- 100px

this is item 8 -- 110px

this is item 9 -- 120px

this is item 10 -- 130px

this is item 11 -- 140px

this is item 12 -- 150px

this is item 13 -- 160px

this is item 14 -- 170px

this is item 15 -- 180px

this is item 16 -- 190px

this is item 17 -- 200px

this is item 18 -- 210px

this is item 19 -- 220px

this is item 20 -- 230px

this is item 21 -- 240px

this is item 22 -- 250px

this is item 23 -- 260px

this is item 24 -- 270px

this is item 25 -- 280px

this is item 26 -- 290px

this is item 27 -- 300px

this is item 28 -- 310px

this is item 29 -- 320px

Horizontal virtual lists

isHorizontal can control the display of horizontal virtual lists.

this is item 0

this is item 1

this is item 2

this is item 3

this is item 4

this is item 5

this is item 6

this is item 7

this is item 8

this is item 9

this is item 10

this is item 11

this is item 12

this is item 13

this is item 14

this is item 15

this is item 16

this is item 17

this is item 18

this is item 19

this is item 20

this is item 21

this is item 22

this is item 23

this is item 24

this is item 25

this is item 26

this is item 27

this is item 28

this is item 29

Custom rendering header and footer

Slots allow you to add content at the top and bottom of the list.

this is header 🥵

this is item 0

this is item 1

this is item 2

this is item 3

this is item 4

this is item 5

this is item 6

this is item 7

this is item 8

this is item 9

this is item 10

this is item 11

this is item 12

this is item 13

this is item 14

this is item 15

this is item 16

this is item 17

this is item 18

this is item 19

this is item 20

this is item 21

this is item 22

this is item 23

this is item 24

this is item 25

this is item 26

this is item 27

this is item 28

this is item 29

this is footer 🐔

Scroll to bottom

KVirtualList provides some APIs, such as scrollToBottom.

this is item 0

this is item 1

this is item 2

this is item 3

this is item 4

this is item 5

this is item 6

this is item 7

this is item 8

this is item 9

this is item 10

this is item 11

this is item 12

this is item 13

this is item 14

this is item 15

this is item 16

this is item 17

this is item 18

this is item 19

this is item 20

this is item 21

this is item 22

this is item 23

this is item 24

this is item 25

this is item 26

this is item 27

this is item 28

this is item 29

VirtualList Props

Name	Type	Default	Description
data	Array<Record<string, any>>	-	Source for list.
key	string	'id'	Unique key for getting data from data
keeps	number	30	Count of rendered items
estimateSize	number	50	Estimate size of each item, needs for smooth scrollbar.
isHorizontal	boolean	false	Scroll direction.
start	number	0	Scroll position start index
offset	number	0	Scroll position offset
topThreshold	number	0	The threshold to emit top event, attention to multiple calls.
bottomThreshold	number	0	The threshold to emit bottom event, attention to multiple calls.
cls	string	''	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

VirtualList Events

Name	Description	Type
scroll	trigger when scroll.	(data: {event: CustomEvent, range: VRange})=> void
top	Fires when the scroll bar reaches the top	()=> void
bottom	Fires when the scroll bar reaches the bottom	()=> void

declare interface VRange {
	start: number;
	end: number;
	padFront: number;
	padBehind: number;
}

VirtualList Slots

Name	Description
default	Customize item content
footer	Customize footer item content
header	Customize header item content

VirtualList Api

method	arguments	description
scrollToBottom	none	Scroll list to bottom
scrollToIndex	index: number	Set scroll position to a designated index
scrollToOffset	offset: number	Set scroll position to a designated offset
getSize	id: typeof props.key	Get the designated item size
getSizes	none	Get the total number of stored (rendered) items
getOffset	none	Get current scroll offset
getClientSize	none	Get wrapper element client viewport size (width or height)
getScrollSize	none	Get all scroll size (scrollHeight or scrollWidth)