一种页面虚拟列表的实现方法与流程

1.本发明属于计算机技术领域，尤其是涉及一种页面虚拟列表的实现方法。


背景技术：

2.在网页开发中，经常会遇到渲染大数据长列表的需求，而且不能使用分页的交互方式展现，如果直接渲染，会造成浏览器卡顿，页面等待时间长、用户体验差，浏览器会崩溃等问题。对于这种长列表渲染，传统的做法是使用懒加载，但是随着加载的数据越来越多，浏览器的回流和重绘的开销也会越来越大，还是会造成卡顿，那么使用虚拟列表就可以解决此问题，通过只渲染可视区域的数据，大大提高渲染性能。


技术实现要素：

3.有鉴于此，为克服上述缺陷，本发明旨在提出一种页面虚拟列表的实现方法。
4.为达到上述目的，本发明的技术方案是这样实现的：
5.第一方面，本发明提供了一种页面虚拟列表的实现方法，包括：
6.创建放置虚拟列表的容器；
7.计算容器最大容积数量，即可视区域容纳多少个列表项；
8.长列表数据不可视区域使用空白占位符填充；
9.监听滚动事件，根据滚动位置的改变改变可视区域列表。
10.进一步的，所述计算容器最大容积数量，即可视区域容纳多少个列表项，包括：
11.先计算出可见区域起始数据索引值startindex和当前可见区域结束数据索引值endindex，再利用startindex和endindex获取可视区域数据。
12.进一步的，所述方法还包括：
13.当滚动发生时，动态通过计算获得可视区域内的列表项，并删除非可视区域内的列表项；
14.当滚动发生时，动态通过计算改变空白填充。
15.进一步的，所述的方法，还包括：
16.计算上滚动空白区域startoffset和下滚动空白区域endoffset，这两个偏移量的作用是用来撑开容器元素的内容。
17.第二方面，本发明提供了一种电子设备/服务器，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器在执行所述指令时，实现上述第一方面所述的页面虚拟列表的实现方法。
18.第三方面，本发明提供了一种可读取存储介质，用于存储计算机程序，所述计算机程序在被处理器执行时，实现上述第一方面所述的页面虚拟列表的实现方法。
19.相对于现有技术，本发明所述的页面虚拟列表的实现方法具有以下优势：
20.本发明可渲染大数据长列表，并且有效解决了大数据列表渲染卡顿问题。
附图说明
21.构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
22.图1为本发明所述的页面虚拟列表的结构示意图。
具体实施方式
23.需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
24.下面将参考附图并结合实施例来详细说明本发明。
25.本实施例提供了一种页面虚拟列表的实现方法，包括：
26.创建放置虚拟列表的容器；
27.计算容器最大容积数量，即可视区域容纳多少个列表项；
28.长列表数据不可视区域使用空白占位符填充；
29.监听滚动事件，根据滚动位置的改变改变可视区域列表。
30.其中，所述计算容器最大容积数量，即可视区域容纳多少个列表项，
31.包括：
32.先计算出可见区域起始数据索引值startindex和当前可见区域结束数据索引值endindex，再利用startindex和endindex获取可视区域数据。
33.其中，所述方法还包括：
34.当滚动发生时，动态通过计算获得可视区域内的列表项，并删除非可视区域内的列表项；
35.当滚动发生时，动态通过计算改变空白填充。
36.其中，所述的方法，还包括：
37.计算上滚动空白区域startoffset和下滚动空白区域endoffset，这两个偏移量的作用是用来撑开容器元素的内容。
38.如图1所示，本实施例可选的实施方式为：
39.1、创建放置虚拟列表的容器，也就是虚拟列表的可视区域，虚拟列表容器的高度一定高于父元素，否则实现不了滚动效果。
40.2、从服务端获取长数据。
41.3、将获取到的长数据只截取一部分用来填充可视区域。
42.4、计算容器最大容积数量，也就是在可视区最多能够容纳多少个列表项。
43.5、长列表数据不可视区域使用空白占位符填充。
44.6、监听滚动事件，根据滚动位置的改变改变可视区域列表。
45.7、当滚动发生时，动态通过计算获得可视区域内的列表项，并删除非可视区域内的列表项。
46.8、当滚动发生时，动态通过计算改变空白填充。
47.具体步骤为：
48.先计算出可见区域起始数据索引值startindex和当前可见区域结束数据索引值endindex，再利用startindex和endindex获取可视区域数据，然后再计算上滚动空白区域
startoffset和下滚动空白区域endoffset，这两个偏移量的作用是用来撑开容器元素的内容，从而起到缓冲的作用。
49.可选实施方式为：
50.1、构建好虚拟列表dom结构。有一个父元素，有一个监听滚动的盒子，高度等于最外层的父元素，监听滚动的盒子里面有一个包裹虚拟列表的盒子，该盒子的高度一定超过父元素，且要动态的改变它的padding值用于控制滚动条的状态。
51.2、要计算可视区域内最多能够容纳多少个列表项。
52.3、监听滚动事件，动态截取要在可视区域显示的数据，设置上下滚动缓冲，解决因快速滚动造成的白屏问题。
53.4、因为数据量不多，需要生成滚动条，所以利用paddingtop和paddingbottom的值动态设置上下空白占位。
54.5、数据量太大，响应时间长，如一万条，可结合懒加载方式，等到下拉触底时接收新数据，放到缓存数据中，再根据滚动事件决定具体渲染哪一部分的数据到页面上去。
55.6、利用帧动画requestanimationframe进行节流优化。
56.本实施例提供了一种服务器，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器在执行所述指令时，实现上述实施例所述的页面虚拟列表的实现方法。
57.本实施例提供了一种可读取存储介质，用于存储计算机程序，所述计算机程序在被处理器执行时，实现上述实施例所述的页面虚拟列表的实现方法。
58.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
59.在本技术所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
60.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
61.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种页面虚拟列表的实现方法，其特征在于，包括：创建放置虚拟列表的容器；计算容器最大容积数量，即可视区域容纳多少个列表项；长列表数据不可视区域使用空白占位符填充；监听滚动事件，根据滚动位置的改变改变可视区域列表。2.根据权利要求1所述的页面虚拟列表的实现方法，其特征在于，所述计算容器最大容积数量，即可视区域容纳多少个列表项，包括：先计算出可见区域起始数据索引值startindex和当前可见区域结束数据索引值endindex，再利用startindex和endindex获取可视区域数据。3.根据权利要求1所述的页面虚拟列表的实现方法，其特征在于，所述方法还包括：当滚动发生时，动态通过计算获得可视区域内的列表项，并删除非可视区域内的列表项；当滚动发生时，动态通过计算改变空白填充。4.根据权利要求3所述的页面虚拟列表的实现方法，其特征在于，所述的方法，还包括：计算上滚动空白区域startoffset和下滚动空白区域endoffset，这两个偏移量的作用是用来撑开容器元素的内容。5.一种服务器，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，其特征在于，所述处理器在执行所述指令时，实现权利要求1-4任一所述的页面虚拟列表的实现方法。6.一种可读取存储介质，用于存储计算机程序，其特征在于，所述计算机程序在被处理器执行时，实现权利要求1-4任一所述的页面虚拟列表的实现方法。

技术总结
本发明提供了一种页面虚拟列表的实现方法，创建放置虚拟列表的容器；计算容器最大容积数量，即可视区域容纳多少个列表项；长列表数据不可视区域使用空白占位符填充；监听滚动事件，根据滚动位置的改变改变可视区域列表。本发明可渲染大数据长列表，并且有效解决了大数据列表渲染卡顿问题。数据列表渲染卡顿问题。数据列表渲染卡顿问题。


技术研发人员：何颖
受保护的技术使用者：紫光云技术有限公司
技术研发日：2023.05.18
技术公布日：2023/9/14