虚拟列表 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>
  );
};

改进本页文档

本页

虚拟列表属性
虚拟列表事件
示例