jh-virtual-scroll 虚拟滚动

用于解决大量数据渲染时，dom 节点过多导致渲染性能降低甚至页面'假死'的情况。兼容原生 js/jQuery/Vue/React/Angular 等。

Installation

webpack

$ npm install jh-virtual-scroll

import 'jh-virtual-scroll.js';

browser

<script src="http://zhkumsg.gitee.io/jh-virtual-scroll/lib/index.js"></script>

Example

live demo

<ul id="main"></ul>

var jhVScroller = new JhVirtualScroll(document.querySelector('#main'), {
	fetch: function() {
		// return datas
	},
	skeleton: function() {
		// return dom
	},
	render: function(data) {
		// return dom
	},
});

引入jh-virtual-scroll后将在全局作用上挂载JhVirtualScroll对象,实例化语句如下

new JhVirtualScroll(el, options，count);

可接受三个参数，依次代表需要监听的元素、渲染配置以及视图外显示多少个元素。

| 参数 | 类型 | 说明 | | :-----: | :----: | :-------------------------------------------------------------------: | | el | dom | 需要监听的元素 | | options | object | 渲染配置，包含三个 fetch、render 和 skeleton 三个属性，详见 options | | count | number | 可见区域外额外显示多少个元素，默认为 10 |

options

| 属性 | 类型 | 说明 | | :------: | :------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | | fetch | function | 支持同步和 promise 返回，在运行过程中会多次调用该方法，用于接收分页数据（array），当返回数据为空数组或者 Promise.reject 时，认为已获取全部数据 | | render | function | 定义如何渲染每一项，接收参数 data 为当前渲染用到的数据，需要返回一个 dom 节点 | | skeleton | function | 定义如何渲染骨架，当快速滚动时避免数据没渲染导致空白，需要返回一个默认的 dom 节点 |

Attributes & Events

• vnodeList 当前实例下渲染核心属性，包含每一项节点的 dom、尺寸以及偏移信息等。非特殊情况下，该属性应为只读属性。

• onReload 当前实例的重置函数，可清空内容，重新进行初始化，接收一个回调方法。