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

バーチャルリストは独立したReactコンポーネントではなく、<List>、<ListItem>ReactコンポーネントとFramework7の特別なバーチャルリストコンポーネントを使用する特殊なケースです。

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

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

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

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

例

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

virtual-list.jsx

import React, { useState } from 'react';
import { Navbar, Page, List, ListItem, Subnavbar, Searchbar, Block, theme } from 'framework7-react';

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

  const searchAll = (query, searchItems) => {
    const found = [];
    for (let i = 0; i < searchItems.length; i += 1) {
      if (
        searchItems[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
        query.trim() === ''
      )
        found.push(i);
    }
    return found; // return array with mathced indexes
  };
  const renderExternal = (vl, newData) => {
    setVlData({ ...newData });
  };
  return (
    <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 className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List
        strong
        outlineIos
        insetMd
        dividersIos
        className="searchbar-found"
        medialList
        virtualList
        virtualListParams={{
          items,
          searchAll,
          renderExternal,
          height: theme.ios ? 63 : theme.md ? 73 : 77,
        }}
      >
        <ul>
          {vlData.items.map((item, index) => (
            <ListItem
              key={index}
              mediaItem
              link="#"
              title={item.title}
              subtitle={item.subtitle}
              style={{ top: `${vlData.topPosition}px` }}
              virtualListIndex={items.indexOf(item)}
            />
          ))}
        </ul>
      </List>
    </Page>
  );
};

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

このページについて

バーチャルリストプロパティ
バーチャルリストイベント
例