svelte-virtual-infinite-list(DEMO)
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. |
LICENSE
LIL (original)
LIL+MIT
