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 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 class="searchbar-not-found">
          <f7-list-item title="Nothing found"></f7-list-item>
        </f7-list>
        <f7-list
          class="searchbar-found"
          medial-list
          virtual-list
          :virtual-list-params="{ items, searchAll, renderExternal, height: $theme.ios ? 63 : 73}"
        >
          <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`"
            ></f7-list-item>
          </ul>
        </f7-list>
      </f7-page>
    </template>
    <script>
      export default {
        data() {
          const items = [];
          for (let i = 1; i <= 10000; i += 1) {
            items.push({
              title: `Item ${i}`,
              subtitle: `Subtitle ${i}`,
            });
          }
          return {
            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 mathced indexes
          },
          renderExternal(vl, vlData) {
            this.vlData = vlData;
          },
        },
      };
    </script>