A vue (2.x) component support big data and infinite loading by using virtual scroll list.
-
Tiny and easy to use.
-
Big data list and infinite loading.
-
Set the initial scroll index or change any.
-
List scrolling, to top and bottom can be detected.
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/vue@2.0.0/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>// Global name as `VirutalScrollList`
Vue.component('virtual-list', VirutalScrollList)
new Vue({
el: '#app',
data: {
items: new Array(100000)
}
})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). |
| start | Number | * | Default value is 0, the initial scroll start index. It must be integer and in the range of list index, do nothing but throw a warnning if not match. |
| 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 | Function | * | A function triggered when the virtual-list is scrolled to top. |
| tobottom | Function | * | A function triggered when the virtual-list is scrolled to bottom. |
Welcome to improve vue-virtual-scroll-list by any pull request or issue.