An infinite list component for Svelte apps, providing an easier way to handle load more scenarios.
npm i svelte-list-view
<script>
import ListView from 'svelte-list-view';
let items = [];
async function handleLoadMore() {
items = [...items, ...(await fetchItems())];
}
</script>
<ListView {items} on:loadmore="{handleLoadMore}" let:item>
<p>{item}</p>
</ListView>
pass items
to component's prop and judge how to render item with let:
directive via slot feature.
The custom loadmore
event fires when the last item get into viewport.
only fires once until items update
optional, used to render specific outer element tag. div
by default.