Virtual List - 图1

Virtual List Vue Component

Virtual List is not a separate Vue component, but just a particular case of using , Vue components and special Framework7’s Virtual List component.

Virtual List Properties

PropTypeDefaultDescription
<f7-list> properties
virtual-listbooleanfalseEnables Virtual List
virtual-list-paramsobjectObject with Virtual List Parameters

Virtual List Events

EventDescription
<f7-list> events
virtual:itembeforeinsertEvent will be triggered before item will be added to virtual document fragment
virtual:itemsbeforeinsertEvent will be triggered after current DOM list will be removed and before new document will be inserted
virtual:itemsafterinsertEvent will be triggered after new document fragment with items inserted
virtual:beforeclearEvent 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 component’s property.

Examples

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

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="Virtual List">
  4.       <f7-subnavbar :inner="false">
  5.         <f7-searchbar
  6.           search-container=".virtual-list"
  7.           search-item="li"
  8.           search-in=".item-title"
  9.           :disable-button="!$theme.aurora"
  10.         ></f7-searchbar>
  11.       </f7-subnavbar>
  12.     </f7-navbar>
  13.     <f7-block>
  14.       <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>
  15.       <p>Here is the example of virtual list with 10 000 items:</p>
  16.     </f7-block>
  17.     <f7-list class="searchbar-not-found">
  18.       <f7-list-item title="Nothing found"></f7-list-item>
  19.     </f7-list>
  20.     <f7-list
  21.       class="searchbar-found"
  22.       media-list
  23.       virtual-list
  24.       :virtual-list-params="{ items, searchAll, renderExternal, height: $theme.ios ? 63 : ($theme.md ? 73 : 46)}"
  25.     >
  26.       <ul>
  27.         <f7-list-item
  28.           v-for="(item, index) in vlData.items"
  29.           :key="index"
  30.           media-item
  31.           link="#"
  32.           :title="item.title"
  33.           :subtitle="item.subtitle"
  34.           :style="`top: ${vlData.topPosition}px`"
  35.         ></f7-list-item>
  36.       </ul>
  37.     </f7-list>
  38.   </f7-page>
  39. </template>
  40. <script>
  41.   export default {
  42.     data() {
  43.       const items = [];
  44.       for (let i = 1; i <= 10000; i += 1) {
  45.         items.push({
  46.           title: `Item ${i}`,
  47.           subtitle: `Subtitle ${i}`,
  48.         });
  49.       }
  50.       return {
  51.         items,
  52.         vlData: {
  53.           items: [],
  54.         },
  55.       };
  56.     },
  57.     methods: {
  58.       searchAll(query, items) {
  59.         const found = [];
  60.         for (let i = 0; i < items.length; i += 1) {
  61.           if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
  62.         }
  63.         return found; // return array with mathced indexes
  64.       },
  65.       renderExternal(vl, vlData) {
  66.         this.vlData = vlData;
  67.       },
  68.     },
  69.   };
  70. </script>

← View