虚拟列表 Vue 组件

虚拟列表不是一个独立的 Vue 组件，而只是使用<f7-list>, <f7-list-item>Vue 组件和特殊的 Framework7 的虚拟列表组件。

虚拟列表属性

属性	类型	默认	描述
<f7-list> 属性
virtual-list	布尔值	false	启用虚拟列表
virtual-list-params	对象		带有虚拟列表参数

虚拟列表事件

事件	描述
<f7-list> 事件
virtual:itembeforeinsert	事件将在项目添加到虚拟文档片段之前触发
virtual:itemsbeforeinsert	事件将在当前 DOM 列表被移除之前和新的文档插入之前触发
virtual:itemsafterinsert	事件将在带有项目的新文档片段插入之后触发
virtual:beforeclear	事件将在当前 DOM 列表被移除并替换为新的文档片段之前触发

示例

这里是带有虚拟列表和用于搜索虚拟列表项目的搜索栏的完整页面示例：

virtual-list.vue

<template>
  <f7-page>
    <f7-navbar title="Virtual List">
      <f7-subnavbar :inner="false">
        <f7-searchbar
          search-container=".virtual-list"
          search-item="li"
          search-in=".item-title"
        ></f7-searchbar>
      </f7-subnavbar>
    </f7-navbar>
    <f7-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>
    </f7-block>
    <f7-list strong outline-ios inset-md dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>
    <f7-list
      strong
      outline-ios
      inset-md
      dividers-ios
      class="searchbar-found"
      medial-list
      virtual-list
      :virtual-list-params="{
        items,
        searchAll,
        renderExternal,
        height: theme.ios ? 63 : theme.md ? 73 : 77,
      }"
    >
      <ul>
        <f7-list-item
          v-for="(item, index) in vlData.items"
          :key="index"
          media-item
          link="#"
          :title="item.title"
          :subtitle="item.subtitle"
          :style="`top: ${vlData.topPosition}px`"
          :virtual-list-index="item.index"
        ></f7-list-item>
      </ul>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7List,
  f7ListItem,
  f7Subnavbar,
  f7Searchbar,
  f7Block,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7ListItem,
    f7Subnavbar,
    f7Searchbar,
    f7Block,
  },
  data() {
    const items = [];
    for (let i = 1; i <= 10000; i += 1) {
      items.push({
        title: `Item ${i}`,
        subtitle: `Subtitle ${i}`,
        index: i,
      });
    }
    return {
      theme,
      items,
      vlData: {
        items: [],
      },
    };
  },
  methods: {
    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
    },
    renderExternal(vl, vlData) {
      this.vlData = vlData;
    },
  },
};
</script>

改进此文档

在本页上

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