DEMO)
svelte-virtual-infinite-list(A virtual list component for Svelte apps. Instead of rendering all your data, <VirtuaInfinitelList>
just renders the bits that are visible, keeping your page nice and light.
This library is forked and extends from @sveltejs/svelte-virtual-list, and all the basic feature of @sveltejs/svelte-virtual-list are available except default slot.
Installation
npm i svelte-virtual-infinite-list
Usage
<script lang="ts">
import VirtualInfiniteList from 'svelte-virtual-infinite-list'
import type { InfiniteEvent } from 'svelte-virtual-infinite-list'
import { find } from './find'
let things = [
// these can be any values you like
{ name: 'one', number: 1 },
{ name: 'two', number: 2 },
{ name: 'three', number: 3 },
// ...
{ name: 'six thousand and ninety-two', number: 6092 }
]
let loading = true
let virtualInfiniteList: VirtualInfiniteList
async function onInitialize() {
await virtualInfiniteList.scrollToBottom()
}
async function onInfinite({ detail }: InfiniteEvent) {
if (detail.on === 'bottom') return
loading = true
const data = await find(30)
things = [...data, ...things]
loading = false
}
onMount(async () => {
const data = await find(30)
things = [...data]
loading = false
})
async function scrollToIndex(item) {
const index = things.findIndex((it) => it === item.number)
index && await virtualInfiniteList.scrollToIndex(index)
}
</script>
<VirtualInfiniteList
items={things}
{loading}
direction="top"
persists={30}
uniqueKey={'number'}
on:initialize={onInitialize}
on:infinite={onInfinite}
bind:this={virtualInfiniteList}
let:item
>
<!-- this will be rendered for each currently visible item -->
<div slot="item">
<p>{item.number}: {item.name}</p>
</div>
<!-- option -->
<div slot="loader">
Loading...
</div>
<!-- option -->
<div slot="empty">
Empty
</div>
</VirtualInfiniteList>
Additional Props
No | Property Name | Type | Note |
---|---|---|---|
1 | loading |
boolean | - |
2 | direction |
'top' or 'bottom' or 'vertical'
|
Loading direction. |
3 | maxItemCountPerLoad |
number | Deprecated. This valiable removed @2.0.0. Use persists , please. |
4 | persists |
number | [For direction-top infinite scroll user] Maximum number of items loaded per load. The offset after loaded may be significantly shift if the number of items that exceeds this value is loaded. Default value is 30.
|
5 | uniqueKey |
string | You need to set specify one unique property like id in the item object if you want to use the scrollToIndex method. Default value is undefined.
|
Additional Events
No | Property Name | Type | Note |
---|---|---|---|
1 | on:initialize |
() => any | Emit on change items count from 0 to more over. |
2 | on:infinite |
(event: InfiniteEvent) => any | Emit on scrollbar reached top or bottom. |
Additional Slots
No | Slot Name | Note |
---|---|---|
1 | item |
Displayed item |
2 | loader |
Displayed element if loading is true
|
3 | empty |
Displayed element if items is [] and loading is false
|
Additional Methods
No | Method Name | Type | Note |
---|---|---|---|
1 | scrollTo |
(offset: number) => Promise<void> |
This allows you to scroll to a specific offset. |
2 | scrollToIndex |
(index: number, options?: { align: 'top' | 'bottom' | 'center' }) => Promise<boolean> |
This allows you to scroll to a specific item using the index. Returns true if this is done. |
3 | scrollToTop |
() => Promise<void> |
This allows you to scroll to top. |
4 | scrollToBottom |
() => Promise<void> |
This allows you to scroll to bottom. |
5 | reset |
() => Promise<void> |
This allows you to reset VirtualInfiniteList. |
6 | forceRefresh |
() => Promise<void> |
This allows you to tick and render VirtualInfiniteList. |