Virtual List

Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 components which work with lists such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.

Virtual List Layout

Virtual List HTML layout is pretty simple, it is almost the same as for usual List View with only difference: you need to leave it empty:

<!-- Virtual List -->
<div class="list virtual-list">
  <!-- keep it empty -->
</div>

Where:

• virtual-list - required additional class on any list block that uses Virtual List

Virtual List App Methods

Now, when we have list’s HTML, we need to initialize it. We need to use required App method:

app.virtualList.create(parameters)- initialize virtual list with parameters

• parameters - object - object with virtual list parameters. Required.
• Method returns initialized Virtual List instance

app.virtualList.destroy(el)- destroy Virtual List instance

• el - HTMLElement or string (with CSS Selector) or object. Virtual List element or Virtual List instance to destroy.

app.virtualList.get(el)- get Virtual List instance by HTML element

• el - HTMLElement or string (with CSS Selector). Virtual List element.

Method returns Virtual List’s instance

Note that Virtual List container (list block element) should be in DOM on a moment of initialization.

Virtual List Parameters

Let’s look on list of all available parameters:

Virtual List Methods & Properties

So to create Virtual List we have to call:

var virtualList = app.virtualList.create({ /* parameters */ })

After we initialize Virtual List we have its initialized instance in variable (like virtualList variable in example above) with helpful methods and properties:

Virtual List Events

Virtual List will fire the following events on app and virtual list instance:

Virtual List instance emits events on both self instance and app instance. App instance events has same names prefixed with vl.

Examples

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Virtual List</div>
      <div class="subnavbar">
        <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search"/>
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button if-not-aurora">Cancel</span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="searchbar-backdrop"></div>
  <div class="page-content">
    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
    <div class="list virtual-list media-list searchbar-found"></div>
  </div>
</div>

var app = new Framework7();
// Dummy items array
var items = [];
for (var i = 1; i <= 10000; i++) {
  items.push({
    title: 'Item ' + i,
    subtitle: 'Subtitle ' + i
  });
}
var virtualList = app.virtualList.create({
  // List Element
  el: '.virtual-list',
  // Pass array with items
  items: items,
  // Custom search function for searchbar
  searchAll: function (query, items) {
    var found = [];
    for (var i = 0; i < items.length; i++) {
      if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
    }
    return found; //return array with mathced indexes
  },
  // List item Template7 template
  itemTemplate:
    '<li>' +
      '<a href="#" class="item-link item-content">' +
        '<div class="item-inner">' +
          '<div class="item-title-row">' +
            '<div class="item-title">{{title}}</div>' +
          '</div>' +
          '<div class="item-subtitle">{{subtitle}}</div>' +
        '</div>' +
      '</a>' +
    '</li>',
  // Item height
  height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46),
});

← View / Router

Framework7 Icons Cheatsheet →