Lazy Load List Component For Vue.js 2

Lazy Load List Component For Vue.js 2

A Vue.js 2 component which provides the lazy load functionality on your long item list.

webpack-4 vue-version license npm-version build pass


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



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


<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


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


git clone [email protected]:dwqs/v2-lazy-list.git

cd v2-lazy-list

npm i 

npm run dev



Github Repository

Tags: #VueJs