CN114090165A - 页面组件展示位置调整方法、装置、计算机设备及介质 - Google Patents

Abstract

本公开提供了一种页面组件展示位置调整方法、装置、计算机设备及介质，其中，该方法包括：获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；监听所述各个子组件中组件展示高度发生变化的第一子组件；基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中的待调整子组件；确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

Description

页面组件展示位置调整方法、装置、计算机设备及介质

技术领域

本公开涉及计算机技术领域，具体而言，涉及一种页面组件展示位置调整方法、装置、计算机设备及介质。

背景技术

随着移动互联网技术的发展，用户端页面呈现的内容变得丰富多样，各种页面技术的要求也越来越高，传统的web页面技术虽然应用广泛，但是由于web页面嵌入APP时的技术限制，其对于内容丰富的页面展示效果并不理想，有鉴于此，对于内容丰富的页面，现有技术中通常采用长列表方式进行展示。长列表中各个组件的组件高度为预先设定不变的高度，然而，长列表中各个组件的实际组件高度并不是固定不变的。例如，长列表中包含可收起的组件时，用户可以通过展开或收起组件等操作改变的组件高度。

由于组件高度的变化将导致长列表的整体展示位置发生了变化，从而造成长列表中各个组件的定义展示位置高度与实际情况不符，进而出现页面显示内容混乱或者界面留白等目标页面显示异常的情况。

发明内容

本公开实施例至少提供一种页面组件展示位置调整方法、装置、计算机设备及介质。

第一方面，本公开实施例提供了一种页面组件展示位置调整方法，其包括：获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；监听所述各个子组件中组件展示高度发生变化的第一子组件；基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件；确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

一种可选的实施方式中，所述监听所述各个子组件中组件展示高度发生变化的第一子组件，包括：确定与所述显示组件中每个子组件所对应的高度监听控件；在每个所述子组件所对应高度监听控件中确定发起高度调整事件的目标高度监听控件；将所述目标高度监听控件所对应的子组件确定为所述第一子组件。

一种可选的实施方式中，所述确定所述第一子组件的组件更新高度，包括：从所述第一子组件的属性信息中读取所述第一子组件对应的组件展示高度值；将读取到的所述组件展示高度值确定为所述第一子组件的组件更新高度。

一种可选的实施方式中，所述基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件，包括：在所述第一子组件为多个的情况下，确定多个所述第一子组件中位于所述显示组件最前端的第二子组件；将所述显示组件的各个子组件中位于所述第二子组件之后的剩余子组件确定为所述待调整子组件。

一种可选的实施方式中，所述通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置，包括：获取所述第一子组件的组件高度更新之前的初始组件展示高度；计算所述初始组件展示高度和所述组件更新高度之间的高度差值；基于所述高度差值对所述待调整子组件在所述显示组件中的组件展示位置进行调整。

一种可选的实施方式中，所述方法还包括：在确定所述第一子组件的组件更新高度之后，将组件高度列表中与所述第一子组件相对应的组件展示高度更新为所述组件更新高度；所述组件高度列表中的组件展示高度用于在所述可视区域渲染对应列表数据。

一种可选的实施方式中，所述方法还包括：在计算初始组件高度和所述组件更新高度之间的高度差值之前，从所述组件高度列表中读取所述第一子组件的组件更新高度。

一种可选的实施方式中，所述方法还包括：在通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置之后，基于调整之后的组件展示位置在所述显示组件的各个子组件中确定位于所述可视区域内的第三子组件；通过所述第三子组件展示所述目标列表数据。

一种可选的实施方式中，所述方法还包括：生成用于展示所述目标列表数据的空组件；基于所述目标列表数据和列表组件的生成规则，在所述空组件中生成所述显示组件，并基于所述显示组件，确定每个所述子组件的组件展示高度；为所述显示组件中的每个所述子组件确定高度监听控件，并建立每个所述子组件和对应的高度监听控件之间的绑定关系，其中，所述高度监听控件用于监听对应子组件的组件展示高度的高度调整事件。

第二方面，本公开实施例还提供一种页面组件展示位置调整装置，包括：获取模块，用于获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；监听模块，用于监听所述各个子组件中组件展示高度发生变化的第一子组件；确定模块，用于基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件；调整模块，用于确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

本公开实施例提供的页面组件展示位置调整方法、装置、计算机设备及介质。在获取到目标页面的显示组件中各个子组件的组件展示高度之后，通过监听显示组件中的子组件的组件展示高度发生变化的第一子组件的方式，可以实现实时的对组件展示高度发生变化的子组件进行检测，从而根据监听到的第一子组件对需要进行位置调整的子组件的组件展示位置进行调整，进而避免由于子组件的实际展示位置和预先设定的展示位置不符而导致目标页面显示异常的问题。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种页面组件展示位置调整方法的流程图；

图2示出了本公开实施例所提供的通过显示组件展示列表数据时出现留白情况的示意图；

图3示出了本公开实施例所提供的一种生成显示组件的方法的流程图方法的流程图；

图4示出了本公开实施例所提供的第一子组件的初始组件展示高度和组件更新高度之间的高度差值的示意图；

图5示出了本公开实施例所提供的基于调整组件展示位置之后的第三子组件展示目标列表数据的示意图；

图6示出了本公开实施例所提供的另一种页面组件展示位置调整方法的流程图；

图7示出了本公开实施例所提供的一种页面组件展示位置调整装置的示意图；

图8示出了本公开实施例所提供的一种计算机设备的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。

经研究发现，由于组件高度的变化将导致长列表的整体展示位置发生了变化，从而造成长列表中各个组件的定义展示位置高度与实际情况不符，进而出现页面显示内容混乱或者界面留白等目标页面显示异常的情况。

基于上述研究，在获取到目标页面的显示组件中各个子组件的组件展示高度之后，通过监听显示组件中的子组件的组件展示高度发生变化的第一子组件的方式，可以实现实时的对组件展示高度发生变化的子组件进行检测，从而根据监听到的第一子组件对需要进行位置调整的子组件的组件展示位置进行调整，进而避免由于子组件的实际展示位置和预先设定的展示位置不符而导致目标页面显示异常的问题。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面组件展示位置调整方法进行详细介绍，本公开实施例所提供的页面组件展示位置调整方法的执行主体一般为具有一定计算能力的计算机设备。在一些可能的实现方式中，该页面组件展示位置调整方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。

参见图1所示，为本公开实施例提供的一种页面组件展示位置调整方法的流程图，所述方法包括步骤S101～S107，其中：

S101：获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件。

在本公开实施例中，上述目标页面为动态交互页面，例如，该目标页面可以为web页面，其中，该目标页面中可以包含动态内容。这里，可以根据该动态内容的加载指令从而实现与数据库进行交互，进而获取上述动态内容。

这里，目标页面是浏览器中一种用于展示目标列表数据的前端页面，目标列表数据是显示组件生成时依赖的内容集合。例如，目标列表数据可以包括图片、视频等，显示组件在生成时可以展示目标列表数据中的内容。

因此，这里的各个子组件的组件展示高度为根据每个子组件需要展示的列表数据的数据大小而预先设定好的展示高度。

在本公开实施例中，目标列表数据可以理解为还未展示到显示界面的可视区域内的列表数据；或者，可以理解为在未来时刻(或者下一时刻)即将展示到显示界面的可视区域内的列表数据。

S103：监听所述各个子组件中组件展示高度发生变化的第一子组件。

本公开在实际使用过程中，由于上述目标页面为动态交互页面，因此，上述子组件的组件展示高度可以随着展示的列表数据的数据大小的改变而改变。此时，就需要对上述各个子组件的组件展示高度的变化进行监听，并将组件展示高度发生变化的子组件确定为第一子组件。

具体的，可以监听高度调整事件，该高度调整事件为显示组件中子组件的组件展示高度发生变化之后，对应为该发生变化的子组件生成的用于指示该子组件的组件展示高度发生变化的事件。在监听到高度调整事件后，就可以将该高度调整事件对应的子组件确定为第一子组件。

例如，当子组件中包含可收起或者展开的列表时，在检测到用户对该子组件的列表展开或者列表收起指令时，确定监听到上述高度调整事件。

S105：基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中的待调整子组件。

在本公开实施例中，首先需要确定所述第一子组件在显示组件中的组件位置，然后再基于该第一子组件的组件位置确定出需要调整组件位置的待调整子组件。

这里，该待调整子组件可以为组件展示位置与该第一子组件的组件展示高度变化相关联的子组件，例如，待调整子组件可以为显示组件中位于第一子组件下方的其他子组件。

S107：确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

现有的页面展示效果示意图如图2所示，由于显示组件中任意一个子组件的组件展示高度发生了变化，将导致了该子组件的实际组件展示高度和预先设定好的初始组件展示高度不符，进而就会导致后续展示的列表数据出现留白情况。另外，在子组件的组件展示高度发生变化的情况下，现有的页面展示技术在展示列表数据时还可能会出现乱序的情况，该乱序情况在图2中并未示出。

在本公开实施例中，在确定出第一子组件之后，可以确定第一子组件的组件更新高度，并根据该组件更新高度对待调整子组件的在显示组件中的组件展示位置进行调整。

在本公开实施例中，在获取到目标页面的显示组件中各个子组件的组件展示高度之后，通过监听显示组件中的子组件的组件展示高度发生变化的第一子组件的方式，可以实现实时的对组件展示高度发生变化的子组件进行检测，从而根据监听到的第一子组件对需要进行位置调整的子组件的组件展示位置进行调整，进而避免由于子组件的实际展示位置和预先设定的展示位置不符而导致目标页面显示异常的问题。

在本公开实施例中，在获取目标页面的显示组件中各个子组件的组件展示高度之前，需要生成上述显示组件的组件展示高度，参见图3所示，具体生成过程包括步骤S31～S39，其中：

S31：获取目标页面的目标列表数据；其中，所述目标列表数据为待渲染到所述目标页面对应的显示界面的可视区域内的数据。

这里，目标列表数据可以理解为还未展示到显示界面的可视区域内的列表数据；或者，可以理解为在未来时刻(或者下一时刻)即将展示到显示界面的可视区域内的列表数据。

S32：生成用于展示所述目标列表数据的空组件。

这里，目标页面可以在计算机设备的显示界面上进行显示，基于计算机设备的显示界面的区域尺寸，目标列表数据可能无法通过目标页面一次就在显示界面中完全显示，因此可以基于用户在显示界面上的滑动操作，在客户端的显示界面中通过目标页面分次展示目标列表数据，目标页面每次可以展示部分目标列表数据。

这里，空组件可以理解为一个容器，该容器用于展示目标列表数据的显示组件。

S33：基于所述目标列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的目标列表数据。

这里，显示组件是显示界面中目标列表数据的载体，子组件是显示组件的单元组件，显示组件可以由多个不同的子组件组成，每一个子组件可以是目标列表数据中的部分数据的载体；数据组件的生成规则用于定义各个子组件在显示组件中的相对位置关系。

S34：判断是否监听到显示组件已生成事件。

如果是，执行步骤S35，如果否，继续监听。

具体实施时，显示组件生成完成时会修改引用值(引用值即为指代显示组件的标签，该标签会从一开始的空值(由于显示组件还没有生成，所以该标签值为空值)变成显示组件本身(显示组件生成后，标签值指代的就是显示组件本身)。基于此，本公开实施例中，可以通过监听引用值的改变来获取事件信号，当引用值改变时，可以确定显示组件已生成完毕；如果未监听到引用值的改变，说明显示组件还没有生成完毕，那么继续保持监听。

S35：遍历生成的显示组件，确定显示组件所包括的各子组件的组件展示高度。

本步骤中，可以通过遍历显示组件中每个显示子组件的ClientHeight(网页内容可见区域高)属性获得每个显示子组件的展示高度并记录。

S36：根据确定的各子组件的组件展示高度，建立子组件标识与子组件的组件展示高度之间的映射关系。

在一个实施例中，在建立映射关系时，基于生成的显示组件本身有序的特性，可以根据子组件在显示组件中的指数(即为当前子组件是在显示组件中的第几个)作为子组件标识，建立子组件标识和子组件的组件展示高度之间的映射关系。

然后可以根据建立的映射关系，生成可以用于表示各子组件的组件展示高度的组件高度列表。

S37：删除生成的显示组件。

本步骤中，当生成关联好的高度列表后，代表获取子组件的组件展示高度的流程已经全部完成，为了降低内存负担，可以删除已生成的显示组件。

S38：确定显示组件中的各个子组件的高度监听控件。

本步骤中，可以各个子组件绑定高度监听控件，进而通过高度监听控件监听各个子组件的组件展示高度的变化。

例如，该高度监听控件可以为ResizeObserver(元素尺寸监听控件)，具体的，该ResizeObserver为目标页面中的组件展示高度监听接口，该高度监听控件还可以为页面维护人员编写的组件展示高度监听程序，以便针对不同类型的目标页面进行组件展示高度的监听，本公开对高度监听控件的类型不做具体限定。

S39：确定所述目标页面的初始化结果，其中，所述目标页面初始化结果包括所述组件高度列表。

本步骤中，在为上述各个子组件确定出高度监听控件之后，就可以确定目标页面初始化完毕，并将上述确定出的包含显示组件的各子组件的组件展示高度的组件高度列表作为目标页面的初始化结果。其中，所述初始化结果可以用于确定上述第一子组件的组件位置，以及根据该第一子组件的组件位置确定出待调整子组件。

通过上述描述可知，在本公开实施例中，通过基于目标列表数据和生成规则，为目标列表数据生成显示组件，以便基于该显示组件对子组件的组件展示高度进行监听，从而确定出待调整子组件，进而对该待调整子组件的组件展示位置进行调整。

在本公开实施例中，S103，监听所述各个子组件中组件展示高度发生变化的第一子组件，具体包括如下过程：

S1031：确定与所述显示组件中每个子组件所对应的高度监听控件。

在本公开实施例中，在对上述子组件的组件展示高度进行监听时，首先可以确定出对应的高度监听控件，并根据该高度监听控件对上述子组件的组件展示高度进行监听。上述高度监听控件可以为上述ResizeObserver控件。

具体实施时，可以为显示组件中的每个子组件分别绑定一个高度监听控件，该高度监听控件可以监听绑定的子组件的高度调整事件(Resize事件)。

S1032：在每个所述子组件所对应高度监听控件中确定发起高度调整事件的目标高度监听控件。

在本公开实施例中，当上述高度监听控件监听到的子组件的高度调整事件后，就可以触发该子组件的高度变更逻辑，同时改变该高度监听控件的控件状态。

例如，未监听到子组件的高度调整事件的高度监听控件的控件状态为“0”，那么，触发了高度变更逻辑的高度监听控件的控件状态就可以为“1”，然后，就可以将该控件状态为“1”的高度监听控件确定为目标高度监听控件。

S1033：将所述目标高度监听控件所对应的子组件确定为所述第一子组件。

在本公开实施例中，上述高度监听控件可以对子组件的组件展示高度进行监听，具体的，该高度监听控件可以监听对应的子组件的ClientHeight属性的变化信息，从而得到该子组件的高度变化信息。

通过上述描述可知，在本公开实施例中，可以分别为每个子组件确定对应的高度监听控件，并通过该高度监听控件对每个子组件的组件展示高度的高度调整事件进行监听，从而确定出发生了高度调整事件的第一子组件，进而可以实现实时的对每个子组件的组件展示高度进行监听，在监听到第一子组件之后，从而可以根据监到的第一子组件调整显示组件中待调整组件的组件展示位置，以避免目标页面出现留白和乱序的情况。

在本公开实施例中，S105，基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件，具体包括如下过程：

S1051：在所述第一子组件为多个的情况下，确定多个所述第一子组件中位于所述显示组件最前端的第二子组件。

在本公开实施例中，当可视区域内的多个子组件中至少部分组件所展示的目标列表数据中包含动态内容，且对该多个子组件所对应的目标列表数据中的动态内容进行加载时，若加载失败，则上述至少部分子组件的组件展示高度发生了变化，因此，就可以将这多个子组件确定为第一子组件。其中，该动态内容可以为图片或者视频等。

这里，还可以通过高度组件列表确定每个第一子组件在显示组件中的组件位置，并将组件位置位于显示组件最前端的第一子组件确定为第二子组件。

这里，高度组件列表中包含每个子组件的组件展示高度，以及每个子组件在显示组件中的组件位置。

S1052：将所述显示组件的各个子组件中位于所述第二子组件之后的剩余子组件确定为所述待调整子组件。

在本公开实施例中，在确定出上述第二子组件之后，就可以确定出组件位置受该第一子组件的组件展示高度变化影响的待调整子组件。例如，该待调整子组件可以为显示组件位于第二子组件之后的剩余子组件。

通过上述描述可知，在本公开实施例中，在第一子组件的数量为多个的情况下，可以将组件位置位于显示组件最前端的第一子组件确定为第二子组件，并将该第二子组件之后的剩余子组件确定为待调整子组件，从而实现有针对性的对待调整子组件的位置进行调整，相较于调整显示组件中全部子组件的方式来说，提高了调整效率，节省了计算机资源。

除此之外，还可以将显示组件中每个子组件均确定为待调整子组件，并对每个子组件的组件展示位置进行调整。

在本公开实施例中，S107，确定所述第一子组件的组件更新高度，具体包括如下过程：

S1071：从所述第一子组件的属性信息中读取所述第一子组件对应的组件展示高度值。

S1072：将读取到的所述组件展示高度值确定为所述第一子组件的组件更新高度。

在本公开实施例中，在确定上述第一子组件的组件更新高度时，可以首先对该第一组件的属性信息进行获取，并读取其中的组件展示高度值，其中，该属性信息可以为该第一子组件的组件展示高度属性，例如ClientHeight属性。

另外，上述属性信息还可以为该第一子组件的组件属性，例如，该组件属性可以包含组件展示尺寸属性，组件侧边距属性，组件按钮颜色属性，组件展示高度属性等。在获取到该组件属性后，就可以读取其中的组件展示高度属性，从而得到该第一子组件的组件展示高度值，并将该组件展示高度值确定为该第一子组件对应的组件展示高度值。

通过上述描述可知，在本公开实施例中，能够通过获取第一子组件的属性信息中包含的组件展示高度值来确定该第一子组件的组件更新高度，从而提高确定出第一子组件的组件更新高度的效率。

在本公开实施例中，S107，通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置，具体包括如下过程：

S1071：获取所述第一子组件的组件高度更新之前的组件展示高度。

S1072：计算所述初始组件展示高度和所述组件更新高度之间的高度差值。

S1073：基于所述高度差值对所述待调整子组件在所述显示组件中的组件展示位置进行调整。

在本公开实施例中，在调整待调整子组件的组件展示位置时，首先需要确定该待调整子组件需要进行调整的调整数值，其中，该调整数值可以为上述第一子组件的初始组件展示高度和组件更新高度之间的高度差值h，如图4所示为第一子组件的初始组件展示高度和组件更新高度之间的高度差值h的示意图。

具体的，在确定上述高度差值时，首先可以获取第一子组件的更新前的初始组件展示高度，其中，该初始组件展示高度为根据该第一子组件所展示列表数据的尺寸确定的高度。例如，如该第一子组件所展示的列表数据为一张图片，该图片的尺寸为700×700px，那么该第一子组件的初始组件展示高度应当为700px。

如图4所示，若该第一子组件中的列表数据加载失败，那么，此时在该第一子组件中展示的为加载失败标识，该加载失败标识的尺寸为600×600px，此时第一子组件的组件更新高度即为600px。因此，上述初始组件展示高度和所述组件更新高度之间的高度差值h为100px。

在确定出上述高度差值h之后，就可以根据该高度差值对待调整子组件在显示子组件中的组件展示位置进行调整。其中，该调整可以为对待调整子组件在显示组件中的组件展示位置上移或者下移高度差值h。

具体的，如上所述，若该高度差值为100px，应理解的是，上述待调整子组件为显示组件中组件位置位于该第一子组件之后的子组件，那么，在对该待调整子组件的组件展示位置时，可以将该待调整子组件的组件展示位置上移100px。

通过上述描述可知，在本公开实施例中，通过基于第一子组件的初始组件展示高度和组件更新高度之间的高度差值，对待调整子组件的位置进行调整的方式，可以实现快速的调整待调整子组件的组件展示位置，从而使得调整之后的待调整子组件的布局受第一子组件的组件更新高度影响较小，进而保证页面布局的美观性。

在本公开实施例中，所述方法还包括如下过程：

在确定第一子组件的组件更新高度之后，将组件高度列表中与所述第一子组件相对应的组件展示高度更新为所述组件更新高度；所述组件高度列表中的组件展示高度用于在所述可视区域渲染对应列表数据。

在本公开实施例中，上述组件高度列表包含显示组件中的各子组件的组件展示高度，且该组件高度列表中的各子组件的组件展示高度可以根据高度监听控件的监听结果进行更新。例如，在高度监听控件监听到第一子组件的组件展示高度发生了变化时，就可以获取该第一子组件的组件更新高度，并将组件高度列表中该第一子组件的组件展示高度更新为该第一子组件的组件更新高度。

另外的，该组件高度列表中还可以包含子组件的组件展示位置，因此，在基于上述高度差值h对待调整子组件在显示组件中的组件展示位置进行调整之后，还可以将组件高度列表中待调整组件的初始组件展示位置更新为调整之后的组件展示位置。

具体的，上述待调整子组件的在初始组件展示位置为1000px，该待调整子组件根据高度差值h进行调整之后的组件展示位置为1100px，那么，就可以将组件高度列表中该待调整子组件的组件展示位置更新为1100px。

通过上述描述可知，在本公开实施例中，可以将组件高度列表中的第一子组件的组件展示高度更新为组件更新高度，并对调整之后的待调整子组件的组件展示位置进行更新，从而使得根据该组件高度列表的对列表数据进行渲染时，按照调整之后的组件展示位置进行渲染，使得在展示该列表数据时页面布局不会发生错乱，保证了页面布局的美观性。

在本公开实施例中，所述方法还包括：

在计算初始组件高度和所述组件更新高度之间的高度差值之前，从所述组件高度列表中读取所述第一子组件的组件更新高度。

需要说明的是，在根据第一子组件的属性信息读取到第一子组件的组件展示高度之后，就可以将该第一子组件的组件展示高度确定为该第一子组件的组件更新高度，并基于该组件更新高度，在组件高度列表中更新该第一子组件的组件展示高度。

然后，在计算上述第一子组件的高度差值之前，就可以在该组件高度列表中获取该第一子组件的组件更新高度。

通过上述描述可知，在本公开实施例中，高度列表中包含的子组件的组件展示高度会根据子组件的高度调整进行更新，从而便于查找第一子组件的组件更新高度，保证确定出的高度差值的准确性。

在本公开实施例中，所述方法还包括如下过程：

(1)、在通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置之后，基于调整之后的组件展示位置在所述显示组件的各个子组件中确定位于所述可视区域内的第三子组件；

(2)、通过所述第三子组件展示所述目标列表数据。

在本公开实施例中，如图5所示为基于调整组件展示位置之后的第三子组件展示目标列表数据的示意图。

在一种可选的实施方式中，在将目标列表数据渲染到可视区域内时，首先可以确定进行组件展示位置调整之后，位于可视区域内的第三子组件，并通过该第三子组件展示对应的目标列表数据。

这里，在确定上述第三子组件时，首先可以获取上述可视区域的区域尺寸，并根据该区域尺寸确定出位于该可视区域内的第三子组件。例如，该区域尺寸可以为1280px。

然后，就可以确定位于该可视区域内的子组件，并将位于该可视区域内的子组件确定为上述第三子组件。

具体的，若根据该组件高度列表计算出的位于该可视区域内的子组件分别为子组件1(组件展示高度为500px)，子组件2(组件展示高度为700px)，子组件3(组件展示高度为200px)。那么，就可以将子组件1、子组件2以及子组件3确定为上述第三子组件。

在一种可选的实施方式中，在对目标列表数据进行渲染时，确定出的渲染区域还可以包含上述可视区域。例如，该渲染区域的区域尺寸可以为该可视区域的区域尺寸的预设倍数，如，1.5倍可视区域，2倍可视区域等。

另外的，该渲染区域的区域尺寸还可以设定至少一个适用纬度，其中，每个适用纬度对应着不同的使用条件，例如，该渲染区域的区域尺寸包含1.5倍可视区域，2倍可视区域，2.5倍可视区域等三个适用纬度，其中，1.5倍可视区域的使用条件为展示该目标页面的终端的性能较差，2倍可视区域的使用条件为展示该目标页面的终端的性能一般，25倍可视区域的使用条件为展示该目标页面的终端的性能较好。从而在一定程度上实现对列表数据的预加载，提高用户的浏览体验。

这里，在确定上述第三子组件时，该第三子组件为位于该渲染区域内的子组件。

通过上述描述可知，在本公开实施例中，能够确定出位于可视区域内的第三子组件，并通过该第三子组件展示目标列表数据，而不需要展示全部的列表数据，从而节省了不必要的计算机资源消耗，达到了节能的目的，并且降低了对计算机性能的要求，提高了本方案的适用范围。

在本公开实施例中，所述方法还包括如下过程：

(1)、生成用于展示所述目标列表数据的空组件；

(2)、基于所述目标列表数据和列表组件的生成规则，在所述空组件中生成所述显示组件，并基于所述显示组件，确定每个所述子组件的组件展示高度；

(3)、为所述显示组件中的每个所述子组件确定高度监听控件，并建立每个所述子组件和对应的高度监听控件之间的绑定关系，其中，所述高度监听控件用于监听对应子组件的组件展示高度的高度调整事件。

在本公开实施例中，目标页面可以在计算机设备的显示界面上进行显示，并可以在检测到用户在显示界面上的滑动操作后，在客户端的显示界面中通过目标页面分次展示目标列表数据，该目标页面每次可以展示部分目标列表数据。这里，上述空组件可以理解为一个容器，该容器用于展示目标列表数据的显示组件。

另外的，显示组件是显示界面中目标列表数据的载体，子组件是显示组件的单元组件，显示组件可以由多个不同的子组件组成，每一个子组件可以是目标列表数据中的部分数据的载体；数据组件的生成规则用于定义各个子组件在显示组件中的相对位置关系。

需要说明的是，在确定上述显示组件中每个子组件的组件展示高度时，可以通过遍历操作对该显示组件中的各个子组件的ClientHeight属性进行遍历，从而得到该显示组件中每个子组件所对应的组件展示高度。

在确定出上述显示组件中每个子组件的组件展示高度后，就可以为该显示组件中的子组件确定高度监听控件。具体的，可以分别为每个子组件绑定一个高度监听控件，也可以为多个子组件绑定一个高度监听控件，本公开对每个子组件和高度监听控件之间的绑定关系不做具体限定。

通过上述描述可知，在本公开实施例中，可以通过为显示组件中的每个子组件确定高度监听控件的方式，提高了确定组件展示高度发生变化的第一子组件的效率以及准确度。

为了更好地理解本公开实施例，参见如图6为本公开实施例提供的另一种页面组件展示位置调整方法的流程图，所述方法包括步骤S61～S65，其中：

S61：通过高度监听控件监听显示组件中每个子组件的组件展示高度的高度调整事件。

这里，该高度监听控件可以为上述ResizeObserver，其中，可以为显示组件中的每个子组件分别绑定一个高度监听控件，该高度监听控件可以监听绑定的子组件的高度调整事件。

S62：在监听到所述高度调整事件后，确定所述高度调整事件对应的第一子组件的组件更新高度。

S63：在所述高度更新列表中将所述第一子组件的组件展示高度更新为所述组件更新高度。

S64：基于所述第一子组件的组件更新高度，对后续的待调整子组件的组件展示位置进行调整，得到所述待调整子组件的更新组件展示位置。

这里，在确定出第一子组件的组件更新高度之后，可以基于该组件更新高度确定出该对后续调整子组件的组件展示位置进行调整的高度差值h，其中，该高度差值h的确定过程如上所述，此处不再赘述。然后，就可以基于该高度差值h对后续的待调整子组件的初始展示位置进行调整，并将组件高度列表中待调整子组件的初始组件展示位置更新为上述更新组件展示位置。

S65：确定用于展示目标列表数据的第三子组件，并将该目标列表数据渲染在可视界面内。

这里，该第三子组件可以为位于可视界面内的子组件，并将该第三子组件对应的列表数据确定为目标列表数据。

综上，在本公开实施例中，在获取到目标页面的显示组件中各个子组件的组件展示高度之后，通过监听显示组件中的子组件的组件展示高度发生变化的第一子组件的方式，可以实现实时的对组件展示高度发生变化的子组件进行检测，从而根据监听到的第一子组件对需要进行位置调整的子组件的组件展示位置进行调整，进而避免由于子组件的实际展示位置和预先设定的展示位置不符而导致目标页面显示异常的问题。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与页面组件展示位置调整方法对应的页面组件展示位置调整装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面组件展示位置调整方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图7所示，为本公开实施例提供的一种页面组件展示位置调整装置的示意图，所述装置包括：获取模块71、监听模块72、确定模块73、调整模块74；其中，

获取模块71，用于获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；

监听模块72，用于监听所述各个子组件中组件展示高度发生变化的第一子组件；

确定模块73，用于基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件；

调整模块74，用于确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

本公开实施例中，在获取到目标页面的显示组件中各个子组件的组件展示高度之后，通过监听显示组件中的子组件的组件展示高度发生变化的第一子组件的方式，可以实现实时的对组件展示高度发生变化的子组件进行检测，从而根据监听到的第一子组件对需要进行位置调整的子组件的组件展示位置进行调整，进而避免由于子组件的实际展示位置和预先设定的展示位置不符而导致目标页面显示异常的问题。

一种可能的实施方式中，监听模块72，还用于：

确定与所述显示组件中每个子组件所对应的高度监听控件；在每个所述子组件所对应高度监听控件中确定发起高度调整事件的目标高度监听控件；将所述目标高度监听控件所对应的子组件确定为所述第一子组件。

一种可能的实施方式中，调整模块74，还用于：

从所述第一子组件的属性信息中读取所述第一子组件对应的组件展示高度值；将读取到的所述组件展示高度值确定为所述第一子组件的组件更新高度。

一种可能的实施方式中，确定模块73，还用于：

在所述第一子组件为多个的情况下，确定多个所述第一子组件中位于所述显示组件最前端的第二子组件；将所述显示组件的各个子组件中位于所述第二子组件之后的剩余子组件确定为所述待调整子组件。

一种可能的实施方式中，调整模块74，还用于：

获取所述第一子组件的组件高度更新之前的初始组件展示高度；计算所述初始组件展示高度和所述组件更新高度之间的高度差值；基于所述高度差值对所述待调整子组件在所述显示组件中的组件展示位置进行调整。

一种可能的实施方式中，调整模块74，还用于：

在确定所述第一子组件的组件更新高度之后，将组件高度列表中与所述第一子组件相对应的组件展示高度更新为所述组件更新高度；所述组件高度列表中的组件展示高度用于在所述可视区域渲染对应列表数据。

一种可能的实施方式中，调整模块74，还用于：

在计算初始组件高度和所述组件更新高度之间的高度差值之前，从所述组件高度列表中读取所述第一子组件的组件更新高度。

一种可能的实施方式中，该装置还用于：

在通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置之后，基于调整之后的组件展示位置在所述显示组件的各个子组件中确定位于所述可视区域内的第三子组件；通过所述第三子组件展示所述目标列表数据。

一种可能的实施方式中，该装置还用于：

生成用于展示所述目标列表数据的空组件；基于所述目标列表数据和列表组件的生成规则，在所述空组件中生成所述显示组件，并基于所述显示组件，确定每个所述子组件的组件展示高度；为所述显示组件中的每个所述子组件确定高度监听控件，并建立每个所述子组件和对应的高度监听控件之间的绑定关系，其中，所述高度监听控件用于监听对应子组件的组件展示高度的高度调整事件。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

对应于图1中的页面组件展示位置调整方法，本公开实施例还提供了一种计算机设备800，如图8所示，为本公开实施例提供的计算机设备800结构示意图，包括：

处理器81、存储器82、和总线83；存储器82用于存储执行指令，包括内存821和外部存储器822；这里的内存821也称内存储器，用于暂时存放处理器81中的运算数据，以及与硬盘等外部存储器822交换的数据，处理器81通过内存821与外部存储器822进行数据交换，当所述计算机设备800运行时，所述处理器81与所述存储器82之间通过总线83通信，使得所述处理器81执行以下指令：

获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；

监听所述各个子组件中组件展示高度发生变化的第一子组件；

基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件；

确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面组件展示位置调整方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面组件展示位置调整方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的***、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (12)

1.一种页面组件展示位置调整方法，其特征在于，包括：

获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；

监听所述各个子组件中组件展示高度发生变化的第一子组件；

基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中的待调整子组件；

确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

2.根据权利要求1所述的方法，其特征在于，所述监听所述各个子组件中组件展示高度发生变化的第一子组件，包括：

确定与所述显示组件中每个子组件所对应的高度监听控件；

在每个所述子组件所对应高度监听控件中确定发起高度调整事件的目标高度监听控件；

将所述目标高度监听控件所对应的子组件确定为所述第一子组件。

3.根据权利要求1所述的方法，其特征在于，所述确定所述第一子组件的组件更新高度，包括：

从所述第一子组件的属性信息中读取所述第一子组件对应的组件展示高度值；

将读取到的所述组件展示高度值确定为所述第一子组件的组件更新高度。

4.根据权利要求1所述的方法，其特征在于，所述基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件，包括：

在所述第一子组件为多个的情况下，确定多个所述第一子组件中位于所述显示组件最前端的第二子组件；

将所述显示组件的各个子组件中位于所述第二子组件之后的剩余子组件确定为所述待调整子组件。

5.根据权利要求1所述的方法，其特征在于，所述通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置，包括：

获取所述第一子组件的组件高度更新之前的初始组件展示高度；

计算所述初始组件展示高度和所述组件更新高度之间的高度差值；

基于所述高度差值对所述待调整子组件在所述显示组件中的组件展示位置进行调整。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

在确定所述第一子组件的组件更新高度之后，将组件高度列表中与所述第一子组件相对应的组件展示高度更新为所述组件更新高度；所述组件高度列表中的组件展示高度用于在所述可视区域渲染对应列表数据。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

在计算初始组件高度和所述组件更新高度之间的高度差值之前，从所述组件高度列表中读取所述第一子组件的组件更新高度。

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置之后，基于调整之后的组件展示位置在所述显示组件的各个子组件中确定位于所述可视区域内的第三子组件；

通过所述第三子组件展示所述目标列表数据。

9.根据权利要求1所述的方法，其特征在于，所述方法还包括：

生成用于展示所述目标列表数据的空组件；

基于所述目标列表数据和列表组件的生成规则，在所述空组件中生成所述显示组件，并基于所述显示组件，确定每个所述子组件的组件展示高度；

为所述显示组件中的每个所述子组件确定高度监听控件，并建立每个所述子组件和对应的高度监听控件之间的绑定关系，其中，所述高度监听控件用于监听对应子组件的组件展示高度的高度调整事件。

10.一种页面组件展示位置调整装置，其特征在于，包括：

获取模块，用于获取目标页面的显示组件中各个子组件的组件展示高度；所述显示组件为用于展示待渲染到目标页面对应的显示界面的可视区域内的目标列表数据的组件；

监听模块，用于监听所述各个子组件中组件展示高度发生变化的第一子组件；

确定模块，用于基于所述第一子组件在所述显示组件中的组件位置，确定所述各个子组件中待调整子组件；

调整模块，用于确定所述第一子组件的组件更新高度，并通过所述组件更新高度调整所述待调整子组件在所述显示组件中的组件展示位置。

11.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至9任意一项所述的页面组件展示位置调整方法的步骤。

12.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至9任意一项所述的页面组件展示位置调整方法的步骤。

Images