# JavaScript 虚拟滚动列表组件

**Repository Path**: brandon__leon/javascript_virtual_scrolling

## Basic Information

- **Project Name**: JavaScript 虚拟滚动列表组件
- **Description**: 【造轮子系列】使用JavaScript实现的可配置虚拟列表组件，研究高性能的渲染十万级别及以上的数据。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2020-08-16
- **Last Updated**: 2023-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JavaScript ES5虚拟滚动列表组件

#### 介绍
【造轮子系列】使用**原生ES5语法**JavaScript实现的可配置虚拟列表组件，致力于实现高性能的渲染十万级别的非媒体资源数据，使用简单方便，设计紧凑。基于Vue语法实现的plugin部分仍在开发当中...

#### 软件架构
软件架构说明
1. demo.html/demo-vue.html：实例的demo。
2. JS/virtual-list.js：原生ES5语法实现的版本(可直接引入使用)
3. JS/virtual-list-vue.js: 基于Vue实现的插件版本(有缘开发中...)
4. fake-data 测试的用例数据，使用faker.js。

#### 使用说明

***示例***：
1. 通过script标签的方式引入：
```html
<script src="./JS/virtual-list.js"></script>
```
2. 所有的方法挂载在引入的VirtualList构造函数上，通过使用实例对象和来实现虚拟滚动列表。
我们来看一段HTML代码：
```html
<div class="demo"></div>
```
3. 我们给这个div标签写一些简单的样式：
```css
.demo {
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
}
```
4. 我们`new`一个实例对象，并传入参数。
现在`<div class="demo"></div>`元素就变成了一个支持万级别数据渲染的长虚拟列表。
```javascript
// 示例代码
var vl = new VirtualList('.demo', testData, (data) => {
    var li = document.createElement('li');
    li.innerHTML = `
    <h2>这是第${data.index + 1}项数据</h2>
    <p>${data.value}</p>
    `;
    // 需要显式返回dom元素
    return li;
    }, 
    { dynamicHeight: true, estimateListHeight: 40 });
```
5. 传入参数说明：

|参数顺序|参数名称|数据类型|基本说明|
|:---:|:---:|:---:|:---:|
|1|el|String、HTMLElemenet|转换为虚拟列表的容器元素，格式为直接传入DOM元素或者字符串选择器，容器元素需要手动设定CSS样式|
|2|dataList|Array<any>|需要参与渲染的数据列表，传入表现一个数组格式|
|3|HTML Generator|(data)=>HTMLElement|生成单项列表内容的HTML生成器，表现形式为一个回调函数，**VirtualList会显式的将对应索引的dataList元素作为第一个参数传入**，这意味着你可以在这个回调函数的内部做模板元素的组装工作，回调函数**必须**显式return dom元素。|
|4|option（可选）|Object|一个可选的配置参数，详细见配置参数部分说明。|

6. **配置参数说明**：

**通用配置**

|名称|可选值|默认值|基本说明|
|:---:|:---:|:---:|:---:|
|throttleTime|Number|100|对列表scroll事件进行防抖的时间区间，默认为100ms|
|bufferScale|Number|0.5|列表上下缓冲区的大小比例，默认为上下额外渲染 50% 展示的部分|
|useFrameOptimize|Boolean|false|是否采取按帧派发滚动事件，**这个属性对性能敏感**，开启后VirtualList会对scroll事件基于requestAnimationFrame来进行派发，对性能较高的PC端设备来说可以获取无缝的渲染体验，**但对于性能较差的设备可能会导致渲染线程的阻塞**，默认为false|

>VirtualList的内部维护了两套计算滚动距离与高度的方式，是基于配置对象的dynamicHeight属性的布尔值来决定的，通常指定了具体数值的固定高度模式拥有更好的渲染性能。

**固定高度模式配置**

|名称|可选值|默认值|基本说明|
|:---:|:---:|:---:|:---:|
|listHeight|Number|100|每项渲染列表的高度，采取固定高度，默认为100px|

**动态高度模式配置**

|名称|可选值|默认值|基本说明|
|:---:|:---:|:---:|:---:|
|dynamicHeight|Boolean|false|决定每项是否开启动态高度的计算机制，默认为false|
|estimateListHeight|Number|40|动态高度模式下初始每项列表渲染的高度，**这个属性对性能敏感**，高度值与首屏渲染的数量成反比，默认值为40px|

#### API说明

***Still Thinking...***

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 码云特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)