The vue-virtual-scroll-list library lets us add a virtual scroll list to our app.
This way, we can scroll through the items efficiently as they’ll only load when they’re shown on the screen.
In this article, we’ll look at how to use this library to add virtual scroll lists.
Installation
We can install the package by running:
npm install vue-virtual-scroll-list --save
Add the Virtual Scroll List
After installing the package, we can add the virtual scroll list by adding the virtual-list component with a component to display an item.
To do that, we can write:
App.vue
<template>
<div>
<virtual-list
style="height: 360px; overflow-y: auto;"
:data-key="'uid'"
:data-sources="items"
:data-component="itemComponent"
/>
</div>
</template>
<script>
import Item from "./Item";
import VirtualList from "vue-virtual-scroll-list";
export default {
name: "root",
data() {
return {
itemComponent: Item,
items: [{ uid: 1, text: "abc" }, { uid: 2, text: "xyz" }]
};
},
components: { "virtual-list": VirtualList }
};
</script>
Item.vue
<template>
<div>{{ index }} - {{ source.text }}</div>
</template>
<script>
export default {
name: "item-component",
props: {
index: {
type: Number
},
source: {
type: Object,
default() {
return {};
}
}
}
};
</script>
In App.vue , we have the virtual-list component.
We set the list height and set the overflow-y to auto so that we can make the list scrollable.
data-key is the property name for the ID.
data-source has the source of the data.
data-component is the component for displaying the rows.
Props
It has many other options we can change via props.
The keeps prop is how many items we’re expecting the list to keep rending in the real DOM.
extra-props lets us pass in data not in the data-sources .
estimate-size is th estimate size of the item to adjust the scrollbar.
start sets scroll position of start index.
offset sets the scroll position stay offset.
page-mode sets whether to use the document object to scroll through the list.
item-tag is the tag name to render the rows as.
item-class is the class name to add to the rows.
item-style has the styles of the rows.
header-tag has the tag of the header.
header-class has the tag of the header.
header-style has the style of the header.
We also replace the header with footer to set the styles for the footer.
Events
The virtual-list component also emits a few events.
The scroll event is emitted when scrolling.
totop event is emitted when scrolling to the top or left. The event and range parameters are emitted.
tobottom event is emitted when scrolling to the bottom or right.
resized is emitted when items are resized. The id and size payloads are emitted.
Conclusion
The vue-virtual-scroll-list is useful for adding displaying a virtual scroll list.
