Language: ENCN

Virtual List Vue Component

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

Usage example

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

<template>
    <f7-page>
      <f7-navbar back-link="Back" title="Virtual List" sliding>
        <f7-nav-right>
          <!-- Add new VL item on click -->
          <f7-link @click="addNewItem">New Item</f7-link>
        </f7-nav-right>
      </f7-navbar>
      <!--
        Searchbar to search thorugh VL Items
        List to search specified in "search-list" prop
      -->
      <f7-searchbar cancel-link="Cancel" search-list="#search-list"></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
        :virtual-items="items"
        :virtual-height="63"
        :virtual-search-all="searchAll"
        >
        <!-- Templte 7 Virtual List Item Template -->
        <t7-template>
          <f7-list-item media-item link="#" :title="'{{title}}'" :subtitle="'{{subtitle}}' "></f7-list-item>
        </t7-template>
      </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
        }
      },
      methods: {
        // Method to add new item
        addNewItem: function () {
          var self = this;
          self.items.push({
            title: 'Item ' + (self.items.length + 1),
            subtitle: 'Subtitle ' + (self.items.length + 1),
          })
        },
        // Function to proceed search results
        searchAll: function (query) {
          var self = this;
          var found = [];
          for (var i = 0; i < self.items.length; i++) {
              if (self.items[i].title.indexOf(query) >= 0 || query.trim() === '') found.push(i);
          }
          return found;
        }
      }
    }
  </script>

Properties

Prop Type Default Description
<f7-list> Virtual List specific properties
virtual boolean Enables Virtual List
virtual-init boolean true Initializes Virtual List
virtual-items array/object Array with list items
virtual-height number/function If number - item height in px. If function then function should return item height
virtual-rows-before number Amount of rows (items) to be rendered before current screen scroll position. By default it is equal to double amount of rows (items) that fit to screen
virtual-rows-after number Amount of rows (items) to be rendered after current screen scroll position. By default it is equal to the amount of rows (items) that fit to screen
virtual-cols number 1 Number of items per row. Doesn't compatible when using Virtual List with dynamic height
virtual-cache boolean true Disable or enable DOM cache for already rendered list items. In this case each item will be rendered only once and all futher manipulations will be with DOM element. It is useful if your list items have some user interaction elements (like form elements or swipe outs) or could be modified
virtual-filtered-only boolean false Option to show filtered items only set by `filter()` method
virtual-search-by-item function(query, index, item) Search function that will be used by Search Bar, it receives search query, item index and item itself. If item matches to search query you need to return true, otherwise this function should return false
virtual-search-all function(query, items) Search function that will be used by Search Bar, it receives search query and array with all items. You need to loop through items and return array with indexes of matched items
virtual-render-item function(index, item) This optional function allows to use custom function to render item HTML. It could be used instead of template parameter

Access To Virtual List Initialized Instance

If you use automatic initalization to init the Virtual List (with virtual-init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7VirtualList component's property.