0.0.3 • Published 6 years ago
jh-virtual-scroll v0.0.3
jh-virtual-scroll 虚拟滚动
用于解决大量数据渲染时，dom 节点过多导致渲染性能降低甚至页面'假死'的情况。兼容原生 js/jQuery/Vue/React/Angular 等。
Installation
webpack
$ npm install jh-virtual-scrollimport 'jh-virtual-scroll.js';browser
<script src="http://zhkumsg.gitee.io/jh-virtual-scroll/lib/index.js"></script>Example
<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当前实例的重置函数，可清空内容，重新进行初始化，接收一个回调方法。