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 当前实例的重置函数，可清空内容，重新进行初始化，接收一个回调方法。