A simple lazy-load list component based Vue 2.x: https://dwqs.github.io/v2-lazy-list/

Overview

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

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 [email protected]:dwqs/v2-lazy-list.git

cd v2-lazy-list

npm i 

npm run dev

LICENSE

MIT

You might also like...
simple calculation lib with lazy feature 🎲➕➖➗✖️
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

A vue component for sleek and optimal lazy loading

sloth-loader 🦥 Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

:camera: Mini Image Lazy Loader for P(R)eact and Vue
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

🐌 vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

A Vue lazy loading directive.

A Vue lazy loading directive.

Comments
  • removeEventListener error

    removeEventListener error

    I always get the next error while trying to remove a v2-lazy-list component. I think this is because removeEventListener takes 2 parameters not one like in

    https://github.com/dwqs/v2-lazy-list/blob/7f0b7e7905285e972e71efa3c468fc8c64375725/src/lazy-list.js#L275

    Error: Error in beforeDestroy hook: "TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present."

    opened by nizarahmed 1
Releases(v2.2.2)
Owner
Pomy
:blush: :smiling_imp: :sunglasses: I hear and I forget. I see and I remember. I do and I understand. Follow heart, Try everything :running: :sunny: :dog:
Pomy
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
A Vue.js component to lazy load images using the Intersection Observer.

vue-li-image A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

null 0 Mar 19, 2021
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

null 2 Feb 8, 2022
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

null 5 Sep 25, 2022
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 60 Mar 28, 2022
The easiest way to lazy load your content

VueLazily The easiest way to lazy load your content. Inspired by vue-promised, recommend to look at it if you need loading/errors handling without laz

Enkot 6 Aug 31, 2022
A Vue.js component to load an image automatically when it enters the viewport.

A Vue.js component to load an image automatically when it enters the viewport.

Ali Sarfaraz 0 Mar 29, 2020
A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

Cube 4 Jun 19, 2020