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/index.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': VirutalScrollList // Global name as `VirutalScrollList`
}
});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). |
| rtag | String | * | Default value is div, the virtual-list's root HTMLElement tag name, in all case it's style is set to display: block; |
| wtag | String | * | Default value is div, the virtual-list's item wrapper HTMLElement tag name, in all case it's style is set to display: block; |
| 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!