v2-lazy-list

v2-lazy-list

A simple lazy-load list component based Vue 2.x, which will be on-demand rendering the list based container element's viewport.

v1.x is not maintained

Installation

npm:

npm i --save v2-lazy-list beautify-scrollbar

or yarn

yarn add  v2-lazy-list beautify-scrollbar

Get Started

import Vue from 'vue';
import 'beautify-scrollbar/dist/index.css';
import V2LazyList from 'v2-lazy-list';

Vue.use(V2LazyList)

<v2-lazy-list :data="data"></v2-lazy-list>

Visit the examples.

Available Props

Attribute	Type	Accepted Values	Default	Description
data	Array	-	[]	the list data to render
height	String/Number	-	320	the height of the content wrap element
item-height	String/Number	-	40	the height of list item
threshold	String/Number	-	0	the threshold value to trigger next-fetch in infinite scrolling
tag	String	HTML tag name	'ul'	container elment tag
item-tag	String	HTML tag name	'li'	item element tag
mode	String	demand/lazy	'demand'	render demand list or lazy list

Events

Event Name	Description	Parameters
reach-threshold	triggers when reaching threshold value	-
scrolling	triggers when element is scrolling	-
scroll-stop	triggers when element stop scroll	-

Development

git clone [e-mail]:dwqs/v2-lazy-list.git

cd v2-lazy-list

npm i 

npm run dev

LICENSE

MIT