A vue (2.x) component support big data and infinite loading by using virtual scroll list.
npm install vue-virtual-scroll-list --save
<template>
<div>
<virtualList :size="40" :remain="8">
<Item v-for="(item, index) of items" :item="item" :key="item.id" />
</virtualList>
</div>
</template>
<script>
import Item from '../item.vue';
import virtualList from 'vue-virtual-scroll-list';
export default {
name: 'demo',
data () {
return {
items: [...]
}
},
components: { Item, virtualList }
}
</script>The <Item> component is included inside but defined outside the <virtualList> component. We see that <virtualList> not rely on <Item> component. So you can use virtual-list with any list item component freely.
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://tangbc.github.io/vue-virtual-scroll-list/dist/vue-virtual-scroll-list.js"></script>
<div id="app">
<virtual-list :size="40" :remain="8">
<div class="item" v-for="(item, index) of items" :key="index">Item: # {{ index }}</div>
</virtual-list>
</div>new Vue({
el: '#app',
data: {
items: new Array(100000)
},
components: {
'virtual-list': VirutalList
}
});Notice: list Item component or DOM frag using v-for must designate the :key property.
| Prop | Type | Required | Description |
|---|---|---|---|
| size | Number | ✓ | Each list item height, currently only supports fixed height. |
| remain | Number | ✓ | How many items except show in virtual-list viewport, so size and remian will determine the virtual-list outside container height (size × remian). |
| klass | String | * | Add a custom classname to virtual-list component default is virtual-scroll-list. |
| onScroll | Function | * | Call on virtual-list scroll event hanlding, param: (e, scrollTop) |
| toTop | Event | * | An event emit by virtual-list component when the list is scrolled on top. |
| toBottom | Event | * | An event emit by virtual-list component when the list is scrolled on bottom. |
Welcome to improve vue-virtual-scroll-list by any pull request or issue!