Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including v2-lazy-list with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. require("beautify-scrollbar/package.json"); // beautify-scrollbar is a peer dependency. var v2LazyList = require("v2-lazy-list")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

v2-lazy-list v2.2.5

A simple lazy load list component based Vue 2.x

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

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

AttributeTypeAccepted ValuesDefaultDescription
dataArray-[]the list data to render
heightString/Number-320the height of the content wrap element
item-heightString/Number-40the height of list item
thresholdString/Number-0the threshold value to trigger next-fetch in infinite scrolling
tagStringHTML tag name'ul'container elment tag
item-tagStringHTML tag name'li'item element tag
modeStringdemand/lazy'demand'render demand list or lazy list

Events

Event NameDescriptionParameters
reach-thresholdtriggers when reaching threshold value-
scrollingtriggers when element is scrolling-
scroll-stoptriggers when element stop scroll-

Development

git clone git@github.com:dwqs/v2-lazy-list.git

cd v2-lazy-list

npm i 

npm run dev

LICENSE

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free