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.
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>| 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 | |
| virtual-render-external | function(vlInstance, renderParameters) | This optional function allows to render DOM items using some custom method. Useful in case it is used (e.g.) with Vue/React plugin to pass DOM rendering and manipulation to Vue/React. renderParameters conaints object with the following properties: fromIndex, toIndex, listHeight, topPosition, items |
|
| Event | Description |
|---|---|
| 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:itembeforeinsert | Event will be triggered before item will be added to virtual document fragment |
| virtual:beforeclear | Event will be triggered before current DOM list will be removed and replaced with new document fragment |
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.