vue 组件延时加载_一个基于Vue 2的简单的延迟加载列表组件

vue 组件延时加载

v2-懒惰列表 (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.

一个基于Vue 2.x的简单的延迟加载列表组件，它将按需呈现基于列表的容器元素的视口。

View demo 查看演示 Download Source 下载源

v1.x is not maintained

v1.x未维护

安装 (Installation)

npm:

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>

可用道具 (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

属性	类型	接受值	默认	描述
数据	数组	--	[]	要呈现的列表数据
高度	字符串/数字	--	320	内容包装元素的高度
项目高度	字符串/数字	--	40	列表项的高度
阈	字符串/数字	--	0	无限滚动中触发下一次提取的阈值
标签	串	HTML标签名称	'ul'	容器标签标签
项目标签	串	HTML标签名称	“李”	项目元素标签
模式	串	需求/懒惰	'需求'	呈现需求列表或惰性列表

大事记 (Events)

Event Name	Description	Parameters
reach-threshold	triggers when reaching threshold value	-

活动名称	描述	参量
到达阈值	达到阈值时触发	--

发展历程 (Development)

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

cd v2-lazy-list

npm i 

npm run dev

翻译自: https://vuejsexamples.com/a-simple-lazy-load-list-component-based-vue-2/

vue 组件延时加载