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