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.

Virutal 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

Virutal 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

Access To Virtual List Instance

You can access Virtual List initialized instance by accessing .f7VirtualList <f7-list> component's property.

Examples

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

<template>
  <f7-page>
    <f7-navbar back-link="Back" title="Virtual List"></f7-navbar>
    <!--
      Searchbar to search thorugh VL Items
      List to search specified in "search-list" prop
    -->
    <f7-searchbar
      search-container="#search-list"
      search-item="li"
      search-in=".item-title"
    ></f7-searchbar>

    <!-- This block will become visible when there is nothing found -->
    <f7-list class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>

    <!-- Search through this list -->
    <f7-list
      id="search-list"
      class="searchbar-found"
      media-list
      virtual-list
      :virtual-list-params="{ items: items, height: 63, searchAll: searchAll, renderExternal: renderExternal }"
      >
      <ul>
        <!-- we will get the items we need to render from VL render external callback -->
        <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`"
        ></f7-list-item>
      </ul>
    </f7-list>
  </f7-page>
</template>
<script>
  export default {
    data: function () {
      var items = [];
      for (var i = 1; i <= 10000; i++) {
        items.push({
          title: 'Item ' + i,
          subtitle: 'Subtitle ' + i
        });
      }
      return {
        items: items,
        vlData: {},
      };
    },
    methods: {
      // Function to proceed search results
      searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i += 1) {
            if (items[i].title.toLowerCase().indexOf(query) >= 0 || query.trim() === '') found.push(i);
        }
        return found; // return array with mathced indexes
      },
      renderExternal(vl, vlData) {
        this.vlData = vlData;
      },
    },
  }
</script>