vue-virtual-scroll-list

A vue component that support big data by using virtual scroll list. Tiny, smooth and without any dependence.

How it works

Demos

• vue-virtual-scroll-list with 10,0000 finite data.

• vue-virtual-scroll-list infinite data by increasing 20 each time.

Usage

Using by npm:

npm install vue-virtual-scroll-list --save

Example

Using Vue single file components:

<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',

		components: { Item, VirtualList },

		data () {
			return {
				items: [...]
			}
		}
	}
</script>

The <Item /> component is defined outside but included inside the <VirtualList /> component. VirtualList has nothing to do with <Item />, so you can use virtual list with any list item component your project need, you just want to care about component <Item /> and data items.

Support props type

Prop	Type	Required	Description
size	Number	✓	Each list item height (pixel).
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).
onScroll	Function	*	Call on virtual list scroll event hanlding, param: (scrollTop, e)
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.

License

MIT License