虚拟列表 Svelte 组件

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

虚拟列表属性

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

虚拟列表事件

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

访问虚拟列表实例

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

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

改进此文档

在此页面上

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