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的简单的延迟加载列表组件,它将按需呈现基于列表的容器元素的视口。
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 组件延时加载