バーチャルリスト Svelteコンポーネント

Virtual ListはSvelteの独立したコンポーネントではなく、<List>、<ListItem>のSvelteコンポーネントと、Framework7のVirtual Listコンポーネントを使用した特殊なケースになります。

バーチャルリストのプロパティ

Prop	Type	Default	Description
<List> properties
virtualList	boolean	false	バーチャルリストの有効化
virtualListParams	object		オブジェクトに仮想リストのパラメータを設定できます。

仮想リストイベント

Event	Description
<List> events
virtualItemBeforeInsert	アイテムが仮想ドキュメントフラグメントに追加される前にイベントが発生します。
virtualItemsBeforeInsert	現在のDOMリストが削除された後、新しいドキュメントが挿入される前にイベントが発生します。
virtualItemsAfterInsert	イベントは、アイテムが挿入された新しいドキュメントフラグメントの後に発生します。
virtualBeforeClear	イベントは、現在のDOMリストが削除され、新しいドキュメントフラグメントに置き換えられる前にトリガされます。

仮想リストのインスタンスへのアクセス

仮想リストの初期化されたインスタンスにアクセスするには、<ListItem>コンポーネントの.virtualListInstanceメソッドを呼び出します。

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

<script>
  //
  let component;

  // あるメソッドでインスタンスを取得する
  const vlInstance = component.virtualListInstance();
</script>

Examples

ここでは、仮想リストと、仮想リストのアイテムを検索するためのサーチバーを使ったフルページの例を示します。

<Page>
  <Navbar title="Virtual List">
    <Subnavbar inner={false}>
      <Searchbar
        searchContainer=".virtual-list"
        searchItem="li"
        searchIn=".item-title"
        disableButton={!theme.aurora}
      ></Searchbar>
    </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 class="searchbar-not-found">
    <ListItem title="Nothing found"></ListItem>
  </List>
  <List
    class="searchbar-found"
    ul={false}
    medialList
    virtualList
    virtualListParams={{
      items: items,
      searchAll: searchAll,
      renderExternal: 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>
  


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

  let 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>