虚拟列表 Svelte 组件

虚拟列表不是一个单独的 Svelte 组件，而只是使用 <List> 的一个特例<List>, <ListItem>Svelte 组件和 Framework7 的特殊虚拟列表组件。

虚拟列表属性

属性	类型	默认	描述
<List> 属性
virtualList	布尔值	false	启用虚拟列表
virtualListParams	对象		带有虚拟列表参数

虚拟列表事件

事件	描述
<List> 事件
virtualItemBeforeInsert	事件将在项目添加到虚拟文档片段之前触发
virtualItemsBeforeInsert	事件将在当前 DOM 列表被移除之前和新的文档插入之前触发
virtualItemsAfterInsert	事件将在带有项目的新文档片段插入之后触发
virtualBeforeClear	事件将在当前 DOM 列表被移除并替换为新的文档片段之前触发

访问虚拟列表实例

您可以通过调用.virtualListInstance的方法来访问初始化的虚拟列表实例<ListItem>组件。

<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 matched 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>

改进此文档

在本页上

虚拟列表属性
虚拟列表事件
访问虚拟列表实例
示例