Virtual List Svelte Component

Virtual List is not a separate Svelte component, but just a particular case of using <List>, <ListItem> Svelte components and special Framework7's Virtual List component.

Virtual List Properties

Prop	Type	Default	Description
<List> properties
virtualList	boolean	false	Enables Virtual List
virtualListParams	object		Object with Virtual List Parameters

Virtual List Events

Event	Description
<List> events
virtualItemBeforeInsert	Event will be triggered before item will be added to virtual document fragment
virtualItemsBeforeInsert	Event will be triggered after current DOM list will be removed and before new document will be inserted
virtualItemsAfterInsert	Event will be triggered after new document fragment with items inserted
virtualBeforeClear	Event will be triggered before current DOM list will be removed and replaced with new document fragment

Access To Virtual List Instance

You can access Virtual List initialized instance by calling .virtualListInstance method of <ListItem> component.

<List virtualList bind:this={component} ... />

<script>
  //
  let component;

  // to get instance in some method
  const vlInstance = component.virtualListInstance();
</script>

Examples

Here is the full page example with Virtual List and Searchbar to search through Virtual List items:

virtual-list.svelte

<script>
  import {
    theme,
    Navbar,
    Page,
    List,
    ListItem,
    Subnavbar,
    Searchbar,
    Block,
  } from 'framework7-svelte';

  const items = [];
  for (let i = 1; i <= 10000; i += 1) {
    items.push({
      title: `Item ${i}`,
      subtitle: `Subtitle ${i}`,
    });
  }

  let vlData = {
    items: [],
  };

  function searchAll(query, items) {
    const found = [];
    for (let i = 0; i < items.length; i += 1) {
      if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '')
        found.push(i);
    }
    return found; // return array with mathced indexes
  }

  function renderExternal(virtualList, virtualListData) {
    vlData = virtualListData;
  }
</script>

<Page>
  <Navbar title="Virtual List">
    <Subnavbar inner={false}>
      <Searchbar searchContainer=".virtual-list" searchItem="li" searchIn=".item-title" />
    </Subnavbar>
  </Navbar>
  <Block>
    <p>
      Virtual List allows to render lists with huge amount of elements without loss of performance.
      And it is fully compatible with all Framework7 list components such as Search Bar, Infinite
      Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.
    </p>
    <p>Here is the example of virtual list with 10 000 items:</p>
  </Block>
  <List strong outlineIos insetMd dividersIos class="searchbar-not-found">
    <ListItem title="Nothing found" />
  </List>
  <!-- prettier-ignore -->
  <List
    strong
    outlineIos
    insetMd
    dividersIos
    class="searchbar-found"
    ul={false}
    medialList
    virtualList
    virtualListParams={{
      items,
      searchAll,
      renderExternal,
      height: theme.ios ? 63 : (theme.md ? 73 : 77),
    }}
  >
    <ul>
      {#each vlData.items as item, index (index)}
        <ListItem
          mediaItem
          link="#"
          title={item.title}
          subtitle={item.subtitle}
          style={`top: ${vlData.topPosition}px`}
          virtualListIndex={items.indexOf(item)}
        ></ListItem>
      {/each}
    </ul>
  </List>
</Page>

← View

Improve this Doc

On this page

Virtual List Properties
Virtual List Events
Access To Virtual List Instance
Examples