Virtual List Vue Component

Virtual List is not a separate Vue component, but just a particular case of using <f7-list>, <f7-list-item> Vue components and special Framework7's Virtual List component.

Virtual List Properties

Prop	Type	Default	Description
<f7-list> properties
virtual-list	boolean	false	Enables Virtual List
virtual-list-params	object		Object with Virtual List Parameters

Virtual List Events

Event	Description
<f7-list> events
virtual:itembeforeinsert	Event will be triggered before item will be added to virtual document fragment
virtual:itemsbeforeinsert	Event will be triggered after current DOM list will be removed and before new document will be inserted
virtual:itemsafterinsert	Event will be triggered after new document fragment with items inserted
virtual:beforeclear	Event will be triggered before current DOM list will be removed and replaced with new document fragment

Examples

Here is the full page example with Virtual List and Searchbar to search through Virtual List items:

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>

Improve this Doc

On this page

Virtual List Properties
Virtual List Events
Examples