虚拟列表 React 组件

虚拟列表不是一个独立的 React 组件，而只是使用 React 组件和特殊的 Framework7 的<List>, <ListItem>特殊情况虚拟列表组件。

虚拟列表属性

属性	类型	默认	描述
<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 matched 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>
  );
};

改进此文档

在本页上

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