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

バーチャルリストは、個別の Svelte コンポーネントではなく、<List>、<ListItem> Svelte コンポーネントと、Framework7 の特別なバーチャルリストコンポーネントを使用する特定のケースです。

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

プロパティ	型	デフォルト	説明
<List> プロパティ
virtualList	ブール値	false	バーチャルリストを有効にします
virtualListParams	オブジェクト		バーチャルリストパラメーターを含むオブジェクト

バーチャルリストイベント

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

バーチャルリストインスタンスへのアクセス

<ListItem>コンポーネントの.virtualListInstanceメソッドを呼び出すことで、初期化されたバーチャルリストインスタンスにアクセスできます。

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

<script>
  //
  let component;

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

例

バーチャルリストと検索バーを使用してバーチャルリストアイテムを検索する完全なページの例を以下に示します。

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>

このドキュメントを改善する

このページで

バーチャルリストのプロパティ
バーチャルリストイベント
バーチャルリストインスタンスへのアクセス
例