虛擬清單 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>
  );
};

改善此文件

在此頁面

虛擬清單屬性
虛擬清單事件
範例