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.
Virtual 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 |
Virtual 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
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"
:disable-button="!$theme.aurora"
></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"
media-list
virtual-list
:virtual-list-params="{ items, searchAll, renderExternal, height: $theme.ios ? 63 : ($theme.md ? 73 : 46)}"
>
<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>