一种多行虚拟列表的视图展示控制方法、装置及设备

技术领域

本说明书涉及计算机技术领域，尤其涉及一种多行虚拟列表的视图展示控制方法、装置及设备。

背景技术

随着大数据时代的到来，各个行业的数据量的变得越来越庞大。由于浏览器硬件和渲染机制的限制，单一视图容器的内容达到万级左右就会导致明显的卡顿，所以如何将如此大量的数据在固定大小的屏幕中展示出来，便成为行业中急需解决的一大问题。为解决大量数据展示的问题，现有技术提出了一种将数据显示到网页上的虚拟列表，即通过把需要显示的数据以“按需加载”的形式显示在页面上，使得网页的运行性能达到提升、用户可能清晰明了地浏览到数据列表。由于显示器可视范围有限，通常只能展示部分数据，大部分数据被隐藏在滚动条中，需要拖动滚动条实现对可视区域中展示的数据进行更新。

然而，当前虚拟列表技术仅基于滚动条的滚动实现对于海量数据的单行、单列连续展示，对于多行、多列尤其是行之间、列之间元素数量并不对等的情况，难以同时进行控制滚动，且往往对内容的显示尺寸进行限制，对任意尺寸内容的展示支持度不高。且现有单行控制中基于划动距离对虚拟列表中的全部数据进行更新，并基于更新后的虚拟列表渲染可视区域，不仅降低了虚拟列表中数据的更新速度，也提高了资源消耗。

发明内容

为解决上述技术问题，本说明书一个或多个实施例提供了一种多行虚拟列表的视图展示控制方法、装置及设备。

本说明书一个或多个实施例采用下述技术方案：

本说明书一个或多个实施例提供一种多行虚拟列表的视图展示控制方法，方法包括：

基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行；

对各所述内层展示行创建虚拟滚动控制器，以基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式；其中，所述数据展示格式包括：高度值、宽度值；

获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离；

根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据；

基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表。

可选地，在本说明书一个或多个实施例中，基于业务需求指令所对应的视图展示区域，确定所述待展示数据所对应的外层滚动数据与内层展示行之前，所述方法还包括：

获取当前系统各触控按钮所对应的业务需求指令，以将所述触控按钮所对应的触发事件加入触发所述业务需求指令的订阅列表中；

若确定所述触控按钮被触发，则启动对应的业务需求指令；

响应于业务需求指令，获取预置数据库内的待展示数据。

可选地，在本说明书一个或多个实施例中，对各所述内层展示行创建虚拟滚动控制器，具体包括：

确定各所述内层展示行所对应的javascript对象；

基于所述对应的javascript对象，标记各所述内层展示行所对应的显示数据作为各所述内层展示行的待滚动组件；

基于所述对应的javascript对象与所述待滚动组件的对应关系，生成各所述内层展示行所对应的虚拟滚动控制器。

可选地，在本说明书一个或多个实施例中，基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式，具体包括：

基于所述业务需求指令确定各所述内层展示行所对应的数据数量，以基于所述虚拟滚动控制器将对应的数据数量的显示数据分配到各所述内层展示行；

获取所述视图展示区域的高度与所述内层展示行的行数，以确定所述内层展示行的初始化高度值；

获取所述视图展示区域所对应的预置像素阈值范围，以随机获取所述预置像素阈值范围内的数值作为初始化宽度值；

基于所述初始化高度值与所述初始化宽度值对各所述显示数据的数据展示格式进行初始化。

可选地，在本说明书一个或多个实施例中，获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离，具体包括：

根据预设监听函数订阅所述视图展示区域的滚动事件，以响应于所述订阅获取所述视图展示区域的滚动事件；其中，所述滚动事件包括：滚动方向、滚动速度、滚动时间；

基于所述滚动速度与所述滚动时间确定各所述滚动方向的滚动距离；

对各所述滚动方向的滚动距离进行合并确定所述滚动时间所对应的视图滚动距离。

可选地，在本说明书一个或多个实施例中，根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据，具体包括：

获取所述视图展示区域中各所述内层展示行的起始数据；

依次获取各所述起始数据的下一显示数据，并获取所述下一数据的累计展示宽度，以确定所述下一数据的偏移量；

若确定所述偏移量小于等于视图滚动距离与所述下一数据实际宽度的和，则确定所述下一数据为所述内层展示行的终止数据；

根据各所述内层展示行的所述起始数据与所述终止数据，确定所述视图展示区域的当前展示数据。

可选地，在本说明书一个或多个实施例中，获取所述视图展示区域中各所述内层展示行的起始数据，具体包括：

获取各所述显示数据的初始宽度值，并基于各所述内层展示行的累计展示长度确定各所述显示数据的偏移量；

若确定所述偏移量小于等于所述视图滚动距离且所述显示数据的宽度与所述偏移量的和大于等于所述视图滚动距离，则将所述显示数据作为所述内层展示行的起始数据。

可选地，在本说明书一个或多个实施例中，基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表，具体包括：

基于预置回调函数获取各所述当前展示数据的实际展示格式；其中，所述回调函数包括：requestAnimationFrame函数；

将所述实际展示格式更新到与所述内层展示行相对应的虚拟滚动控制器中，以基于所述实际展示格式替换所述数据展示格式，获得更新后的展示格式；

将所述当前展示数据渲染到各更新后的展示格式中，基于所述视图滚动距离与所述更新后的展示格式的宽度，更新所述视图展示区域的当前展示数据，获得多行虚拟列表。

本说明书一个或多个实施例提供一种多行虚拟列表的视图展示控制装置，装置包括：

确定单元，用于基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行；

创建单元，用于对各所述内层展示行创建虚拟滚动控制器，以基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式；其中，所述数据展示格式包括：高度值、宽度值；

获取单元，用于获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离；

数据确定单元，用于根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据；

更新展示单元，用于基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表。

本说明书一个或多个实施例中，提供了一种多行虚拟列表的视图展示控制设备，设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行；

对各所述内层展示行创建虚拟滚动控制器，以基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式；其中，所述数据展示格式包括：高度值、宽度值；

获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离；

根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据；

基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

对于各个内层展示行创建单独的控制机制，以使其受到同一滚动视图的控制，从而解决了现有技术中当前虚拟列表技术仅针海量数据的单行、单列连续展示难以实现多行多列海量数据的连续展示的问题。通过初始化各显示数据的数据展示格式后,根据预置二分法对视图滚动距离进行处理，确定视图展示区域的当前展示数据，然后基于实际实际展示格式进行更新后获得多行虚拟列表。基于对于实际展示格式的更新展示解决了现有技术中对于显示尺寸进行限制，所导致的任意尺寸内容的展示支持度不高的问题。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本说明书实施例提供的一种多行虚拟列表的视图展示控制方法的流程示意图；

图2为本说明书实施例提供的一种多行虚拟列表的视图展示示意图；

图3为本说明书实施例提供的一种多行虚拟列表的视图展示控制装置内部结构示意图；

图4为本说明书实施例提供的一种多行虚拟列表的视图展示控制设备的内部结构示意图。

具体实施方式

本说明书实施例提供一种多行虚拟列表的视图展示控制方法、装置及设备。

为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本说明书保护的范围。

如图1所示，本说明书一个或多个实施例中，提供了一种多行虚拟列表的视图展示控制方法的流程示意图。由图1可知，一种多行虚拟列表的视图展示控制方法，方法包括以下过程：

S101：基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行。

当前由于浏览器硬件和渲染机制的限制，单一视图容器的内容达到万级左右就会导致明显的卡顿，所以对于大数据量的数据展示通常采用分页和虚拟列表的形式进行。由于虚拟列表对于连续阅读更为友好，所以传统技术中通常基于虚拟列表进行展示，但是当前虚拟列表技术仅针对于海量数据的单行、单列连续展示，难以实现基于单一滚动视图连续展示多行的海量数据。因此本说明书实施例中为了实现对于多行任意尺寸的数据进行连续展示，首先根据用户触发触控按钮形成的业务需求指令所对应的视图展示区域，确定出待展示数据所对应的外层滚动数据和内层展示行。

进一步地，为了能够获得与业务需求指令相对应的待展示数据，也就是说可以基于不同的业务需求在视图中展示所需要的数据。在本说明书一个或多个实施例中，基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行之前，方法还包括以下步骤：

首先，获取当前系统各触控按钮所对应的业务需求指令，从而将触控按钮所对应的触发事件加入触发业务需求指令的订阅列表中。如果确定触控按钮被触发，那么就启动对应的业务需求指令。同时响应于该业务需求指令，查询获取预置数据库内相应的待展示数据。

S102：对各所述内层展示行创建虚拟滚动控制器，以基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式；其中，所述数据展示格式包括：高度值、宽度值。

为了实现对于多行数据的连续展示，本说明书对于各个内层展示行创建单独的控制机制，以使其受到同一滚动视图的控制，即本说明书实施例中，对各个内层展示行创建虚拟滚动控制器，从而根据虚拟滚动控制器确定出各个内层展示行的显示数据，同时为了进行初步的尺寸计算虚拟滚动控制器会初始化各个显示数据的数据展示格式。其中，需要说明的是数据展示格式包括：高度值和宽度值。

具体地，在本说明书一个或多个实施例中，对各内层展示行创建虚拟滚动控制器，具体包括以下过程：首先确定各内层展示行所对应的javascript对象，然后根据对应的javascript对象，标记各内层展示行所对应的显示数据作为各内层展示行的待滚动组件。根据对应的javascript对象与待滚动组件的对应关系，生成各内层展示行所对应的虚拟滚动控制器。

进一步地，在本说明书一个或多个实施例中，基于虚拟滚动控制器确定各内层展示行的显示数据，并初始化各所述显示数据的数据展示格式，具体包括以下步骤：

基于业务需求指令确定各内层展示行所对应的数据数量，从而根据虚拟滚动控制器将对应的数据数量的显示数据分配到各所述内层展示行。例如：从0-599999编号的60万条数据要分成三行每行展示20万条数据，那么此时虚拟滚动控制器将所需要的20万条数据分配到对应的内层展示行中。然后获取视图展示区域的高度与内层展示行的行数，从而确定出内层展示行的初始化高度值。获取视图展示区域所对应的预置像素阈值范围，以随机获取预置像素阈值范围内的数值作为初始化宽度值。然后根据初始化后获得的初始化高度值与初始化宽度值对各显示数据的数据展示格式进行初始化，以便进行初步的尺寸计算。

S103：获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离。

为了能够获取视图展示区域的滚动距离，从而响应于视图的滚动进行多行待展示数据的连续展示。本说明书实施例中，获取虚拟滚动控制器监听的视图展示区域的滚动事件，从而获取滚动事件所对应的视图滚动距离。具体地，在本说明书一个或多个实施例中，获取虚拟滚动控制器监听的视图展示区域的滚动事件，以获取滚动事件所对应的视图滚动距离，具体包括以下步骤：

根据预设监听函数订阅视图展示区域的滚动事件，从而响应于订阅获取视图展示区域的滚动事件；其中，需要说明的是滚动事件包括：滚动方向、滚动速度、滚动时间等。然后根据滚动速度与滚动时间，确定出各滚动方向的滚动距离。然后对各滚动方向的滚动距离进行合并，从而确定出滚动时间所对应的视图滚动距离。在本说明书某应用场景下，通过addEventListener注册滚动视图View原生的滚动监听事件scroll，获取视图View滚动之后的滚动距离Diff。

S104：根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据。

为了获取显示在视图展示区域的当前展示数据，本说明书实施例中通过预先设置的二分法对视图滚动距离进行处理，从而获得视图展示区域的当前展示数据。具体地，在本说明书一个或多个实施例中，根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据，具体包括以下过程：

首先获取视图展示区域中各内层展示行的起始数据，在本说明书一个或多个实施例中，获取视图展示区域中各内层展示行的起始数据，包括以下步骤：先获取各显示数据的宽度，并根据各内层展示行的累计展示长度确定出各显示数据的偏移量，如果确定偏移量小于等于视图滚动距离且显示数据的宽度与偏移量的和大于等于视图滚动距离，那么就将显示数据作为内层展示行的起始数据。然后依次获取各起始数据的下一显示数据，并获取下一数据的累计展示宽度，以确定下一数据的偏移量。如果确定偏移量小于等于视图滚动距离与下一数据实际宽度的和，那么就确定下一数据为所述内层展示行的终止数据。然后根据各内层展示行的起始数据与终止数据，确定出视图展示区域的当前展示数据。例如，某应用场景下每条显示数据对应一个初始宽度值，其之前的数据的累计展示宽度也就是数据距离起始点的偏移量记为left，如果left<＝Diff且left+width>＝Diff,那么该条数据为应展示在视图展示区域中的第一条数据。其中，Diff为视图滚动距离，width为显示数据的初始宽度值。当找到应在视图中展示的第一条数据也就是起始数据后，从该起始数据的下一位开始依次判断数据是否是在视图范围内，直到判断符合left<＝Diff+ClientWidth是找到最后一条应出现在视图中的数据作为终止数据。从而根据各内层展示行的起始数据与终止数据，确定视图展示区域的当前展示数据。

S105：基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表。

为了解决现有虚拟列表对内容的显示尺寸进行限制，对任意尺寸内容的展示支持度不高的问题，本说明书实施例中根据当前展示数据的实际展示格式对数据展示格式进行替换更新，从而基于当前更新后的展示格式重新计算确定视图展示区域所需要展示的当前展示数据，从而将当前展示数据渲染到各更新后的展示格式中，获得如图2所示的多行虚拟列表。

具体地，在本说明书一个或多个实施例中，由于显示数据的实际宽度值与高度值和预先初始化的宽度值和高度值不一定相同，所以在数据展示完成的下一帧，需要基于当前展示数据的实际展示格式对数据展示格式进行更新，从而将当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表，具体地上述过程包括以下步骤：

首先，根据预先设置的回调函数获取各当前展示数据的实际展示格式；其中，需要说明的是回调函数包括：requestAnimationFrame函数。然后将实际展示格式更新到与内层展示行相对应的虚拟滚动控制器中，从而根据实际展示格式替换数据展示格式，获得更新后的展示格式。然后再将当前展示数据渲染到各更新后的展示格式中，从而根据视图滚动距离与更新后的展示格式的宽度，更新视图展示区域的当前展示数据，获得多行虚拟列表。基于上述步骤实现在无入侵方式下完成虚拟列表百万级别的多行不定尺寸的连续数据展示。

如图3所示，本说明书一个或多个实施例中提供了一种多行虚拟列表的视图展示控制装置的内部结构示意图。由图3可知，一种多行虚拟列表的视图展示控制装置，装置包括：

确定单元301，用于基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行；

创建单元302，用于对各所述内层展示行创建虚拟滚动控制器，以基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式；其中，所述数据展示格式包括：高度值、宽度值；

获取单元303，用于获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离；

数据确定单元304，用于根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据；

更新展示单元305，用于基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表。

如图4所示，本说明书一个或多个实施例中提供了一种多行虚拟列表的视图展示控制设备的内部结构示意图。由图4可知，一种多行虚拟列表的视图展示控制设备，设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

基于业务需求指令所对应的视图展示区域，确定待展示数据所对应的外层滚动数据与内层展示行；

对各所述内层展示行创建虚拟滚动控制器，以基于所述虚拟滚动控制器确定各所述内层展示行的显示数据，并初始化各所述显示数据的数据展示格式；其中，所述数据展示格式包括：高度值、宽度值；

获取所述虚拟滚动控制器监听的所述视图展示区域的滚动事件，以获取所述滚动事件所对应的视图滚动距离；

根据预置二分法对所述视图滚动距离进行处理，确定所述视图展示区域的当前展示数据；

基于所述当前展示数据的实际展示格式对所述数据展示格式进行更新，以将所述当前展示数据渲染到各更新后的展示格式中，获得多行虚拟列表。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书的一个或多个实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书的一个或多个实施例可以有各种更改和变化。凡在本说明书的一个或多个实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。