vue lazy load list

一个vue的懒加载组件,当一个list或者一个多级的list的数据非常庞大的时候,进行局部渲染

GitHub issues

vue-lazy-load-list

一个vue的懒加载组件,当一个list或者一个多级的list的数据非常庞大的时候,如果不做局部渲染或者懒加载,浏览器是扛不住的。此组件就是解决这样的问题的,只会渲染视图区中的要呈现的数据,而不是把所有数据一下子全部渲染。

安装

npm install --save vue-lazy-load-list beautify-scrollbar

注册

import Vue from 'vue';
import 'beautify-scrollbar/dist/index.css';
import lazyLoadList from 'vue-lazy-load-list';

Vue.use(lazyLoadList);

在组件中直接使用

<lazy-load-list :data="data"></lazy-load-list>

更详细的例子

属性

参数 类型 是否必填 可选值 默认值 说明
data Array ———— [] 一个数组,数组里的各个item为对象,对象里可以有children ,children必须是个数组,数组里的各个item为对象,可以这样一直嵌套下去,对深度没什么限制,这表示,你不仅可以做一个只有一层的列表,也可以做深层嵌套的列表
listHeight Number 或 String ———— 100px 组件中列表的高度
itemHeight Number 或 String ———— 40px 组件的列表中的每个item的高度
mode String ‘demand’ 或 ‘lazy’ ‘demand’ 渲染模式,当是demo模式时,滚上去的区域会从dom中移除,lazy模式不会移除
searchKeys Array ———— [] 搜索的时候对哪些字段进行搜索
threshold Number 或 String ———— 0 钩子函数,当距离滚动结束还有threshold的距离时,触发reach-threshold 事件
tag String ———— ‘div’ 定义列表包裹元素的tag名称
itemTag String ———— ‘div’ 定义列表的tag
hasSearchInput Boolean ———— true 是否有搜索框
placeholder String ———— ‘please enter keywords’ 搜索框的placeholder

事件

props type requred optional default details
reach-threshold Function ———— 钩子函数,当距离滚动结束还有threshold的距离时,触发reach-threshold 事件

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

LICENSE

MIT