CN113504964A - 页面组件高度确定方法、装置、计算机设备和存储介质 - Google Patents
页面组件高度确定方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN113504964A CN113504964A CN202110852895.1A CN202110852895A CN113504964A CN 113504964 A CN113504964 A CN 113504964A CN 202110852895 A CN202110852895 A CN 202110852895A CN 113504964 A CN113504964 A CN 113504964A
- Authority
- CN
- China
- Prior art keywords
- component
- display
- height
- sub
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 70
- 238000009877 rendering Methods 0.000 claims description 47
- 230000000007 visual effect Effects 0.000 claims description 19
- 238000013507 mapping Methods 0.000 claims description 17
- 230000008569 process Effects 0.000 claims description 17
- 238000004590 computer program Methods 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 5
- 238000000429 assembly Methods 0.000 abstract description 6
- 238000010586 diagram Methods 0.000 description 9
- 230000002159 abnormal effect Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000012544 monitoring process Methods 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000005265 energy consumption Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了一种页面组件高度确定方法、装置、计算机设备和存储介质，其中，该方法包括：获取目标页面的待展示列表数据；基于待展示列表数据和列表组件的生成规则，在空组件中生成显示组件；在确定出满足数据获取条件的情况下，基于显示组件确定每个子组件的组件展示高度。本公开实施例通过基于待展示列表数据和生成规则，为待展示列表数据生成显示组件，进而基于该显示组件确定每个子组件的组件展示高度的方式，可以准确的获取组件展示高度，进而避免由于子组件实际的展示高度与预定义高度不符而导致目标页面显示异常的问题。
Description
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种页面组件高度确定方法、装置、计算机设备和存储介质。
背景技术
随着互联网技术的发展，用户端页面呈现的内容变得丰富多样，各种页面技术的要求也越来越高，传统的web页面技术虽然应用广泛，但是由于web页面嵌入APP时的技术限制，其对于内容丰富的页面展示效果并不理想，有鉴于此，对于内容丰富的页面，现有技术中通常采用长列表方式进行展示。
如图1所示，长列表通常是由若干显示子组件组成，针对采用长列表方式展示的页面，在进行数据渲染时，需要根据预先定义组件高度进行数据渲染展示。发明人发现，在实际应用中，由于用户端存在许多能够影响数据展示效果的影响因素，且这些影响因素在开发端是不可预测的。例如，在数据包含图片或者视频等动态内容时，预先定义的组件高度如果与展示该动态内容的展示高度不同，可能会造成组件高度坍塌，导致页面显示内容叠加、留白等目标页面显示异常的问题。
发明内容
本公开实施例至少提供一种页面组件高度确定方法、装置、计算机设备和存储介质。
第一方面，本公开实施例提供了一种页面组件高度确定方法，包括：获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据；生成用于展示所述待展示列表数据的空组件；基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据；在确定出当前时刻满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
在一种可能的实施方式中，所述方法还包括：响应于针对所述待展示列表数据的数据渲染指令，在所述显示界面的可视区域对所述待展示列表数据进行渲染；并在进行最底层渲染的过程中获取各个子组件的组件展示高度；根据每个所述子组件的组件展示高度，调整所述待展示列表数据在所述可视区域的最上层的展示位置信息；基于所述展示位置信息在所述可视区域的最上层渲染显示所述待展示列表数据。
在一种可能的实施方式中，所述方法还包括：根据每个所述子组件的组件展示高度，建立每个所述子组件的组件标识与每个所述子组件的组件展示高度之间的映射关系；根据所述映射关系生成组件高度列表，其中，所述组件高度列表中的组件展示高度用于在所述可视区域渲染所述待展示列表数据。
在一种可能的实施方式中，所述方法还包括：响应于所述待展示列表数据的数据渲染指令，获取所述组件高度列表；基于所述组件高度列表中的组件展示高度，在所述可视区域渲染所述待展示列表数据。
在一种可能的实施方式中，所述方法还包括：在得到所述组件高度列表之后，删除所述显示组件。
在一种可能的实施方式中，所述确定出当前时刻满足数据获取条件，包括：获取预先为每个所述显示组件中的每个子组件设置的组件标签；在确定出所述组件标签发生变化的情况下，确定所述当前时刻满足所述数据获取条件。
在一种可能的实施方式中，所述方法还包括：在所述空组件中生成所述显示组件之后，为每个所述子组件设置属性信息，其中，所述属性信息用于指示每个子组件对应的组件高度；所述基于所述显示组件，确定每个所述子组件的组件展示高度，包括：针对所述显示组件中的每个子组件，从所述每个子组件的属性信息中读取每个子组件对应的组件高度值；确定读取的组件高度值为该子组件的组件展示高度。
第二方面，本公开实施例还提供一种页面组件高度确定装置，包括：获取单元，用于获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据；第一生成单元，用于生成用于展示所述待展示列表数据的空组件；第二生成单元，用于基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据；确定单元，用于在确定出当前时刻满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
第三方面，本公开可选实现方式还提供一种计算机设备，处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
第四方面，本公开可选实现方式还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
关于上述页面组件高度确定装置、计算机设备、及计算机可读存储介质的效果描述参见上述页面组件高度确定方法的说明，这里不再赘述。
本公开实施例提供的页面组件高度确定方法、装置、计算机设备和存储介质。在本公开实施例中，首先，获取目标页面的待展示列表数据，然后，基于待展示列表数据和列表组件的生成规则，在空组件中生成显示组件；之后，在确定出当前时刻满足数据获取条件的情况下，基于显示组件确定每个子组件的组件展示高度。本公开实施例通过基于待展示列表数据和生成规则，为待展示列表数据生成显示组件，进而基于该显示组件确定每个子组件的组件展示高度的方式，可以准确的获取组件展示高度，进而避免由于子组件实际的展示高度与预定义高度不符而导致目标页面显示异常的问题。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种长列表的示意图；
图2示出了本公开实施例所提供的一种显示组件的预设高度大于显示组件的展示高度时，导致的目标页面实现重叠和留白等异常情况的示意图；
图3示出了本公开实施例所提供的一种页面组件高度确定方法的流程图；
图4示出了本公开实施例所提供的需要预知显示子组件的展示高度的业务组件根据获得的高度列表渲染页面后的显示示意图；
图5示出了本公开实施例所提供的一种页面组件高度确定方法的实施过程流程图；
图6示处了本公开实施例所提供的一种页面组件高度确定装置的示意图；
图7示出了本公开实施例所提供的一种计算机设备结构示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
经研究发现，对于长列表页面的显示，目前较为通用的解决办法是使用虚拟滚动列表代替实际的滚动列表，即在维护列表时，只维护当前一个屏幕高度显示的内容，在滚动时在动态的替换屏幕内的元素，通过这种方式可以有效降低页面内需要维护的节点数，但是上述方案的缺点就是需要根据开发者预先设定好的组件高度，或组件高度的计算方式来判断屏幕内需要渲染的内容。发明人在实现本发明的过程中发现，在实际应用中，由于用户端存在着许多动态的因素在开发端是不可预测的，例如，在有图片、视频等动态请求的内容时，预先定义的组件高度如果与展示该动态内容的展示高度不同，可能会造成组件高度坍塌，导致目标页面显示内容叠加、留白等目标页面显示异常的问题。如图2所示，为本公开实施例所提供的一种显示组件的预设高度大于显示组件的展示高度时，导致的目标页面实现重叠和留白等异常情况的示意图。
基于上述研究，本公开提供了一种页面组件高度确定的方法、装置、计算机设备和存储介质。本公开实施例通过基于待展示列表数据和生成规则，为待展示列表数据生成显示组件，进而基于该显示组件确定每个子组件的组件展示高度的方式，可以准确的获取组件展示高度，进而避免由于子组件实际的展示高度与预定义高度不符而导致目标页面显示异常的问题。
针对以上方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
在本文中提到的“多个或若干个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如：A和/或B，可以表示；单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面组件高度确定方法进行详细介绍，本公开实施例所提供的页面组件高度确定方法的执行主体一般为具有一定计算能力的计算机设备。
下面以执行主体为计算机设备为例对本公开实施例提供的页面组件高度确定方法加以说明。
如图3所示，其为本公开实施例提供的一种页面组件高度确定方法的流程图，包括以下步骤：
S301：获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据。
其中，目标页面是浏览器中一种用于展示目标列表数据的前端页面，目标列表数据是显示组件生成时依赖的内容集合。例如，目标列表数据可以包括图片、视频等，显示组件在生成时可以展示目标列表数据中的内容。
这里，待展示列表数据可以理解为还未展示到显示界面的可视区域内的列表数据；或者，可以理解为在未来时刻(或者下一时刻)即将展示到显示界面的可视区域内的列表数据。
假设，当前时刻显示在目标页面对应的显示界面的可视区域的列表数据为当前列表数据，那么待展示列表数据可以为目标列表数据中位于当前列表数据后的至少一个列表数据。待展示列表数据中所包含的列表数据的数量与计算机设备的显示界面的大小相关联。一般情况下，在预设显示字体的情况下，待展示列表数据的数量可以为一半的显示界面所能够进行展示的数据量。
S302：生成用于展示所述待展示列表数据的空组件。
这里，目标页面可以在计算机设备的显示界面上进行显示，基于计算机设备的显示界面的大小，目标列表数据可能无法通过目标页面一次就在显示界面中完全显示，因此可以基于用户在显示界面上的滑动操作，在客户端的显示界面中通过目标页面分次展示目标列表数据，目标页面每次可以展示部分目标列表数据。
这里，空组件可以理解为一个容器，该容器用于展示待显示列表数据的显示组件。
具体实施时，可以基于CSS(层叠样式表，Cascading Style Sheets)中的visibility(可见度)属性生成上述空组件。CSS的可见度属性具有以下特性：当可见度属性设置为不可见时，组件仍然可以被生成。在本公开实施例中，可以基于可见度属性的该特性生成用于展示待展示列表数据的空组件，进而就可以实现在用户无感知的情况下生成空组件。另外，空组件只会被生成，而不会被渲染到显示界面上。
在生成空组件时，空组件的大小可以为预先设定的默认值，除此之外，该空组件的大小还可以为基于待展示列表数据的预设组件高度确定的数值。
计算机设备针对浏览器主要的性能损耗在于组件生成排版和组件渲染上屏。由于步骤S302不会对组件进行渲染，因此，降低了渲染这一步的性能损耗，有利于提高用户体验。
这里需要说明的是，上述步骤S301和S302的执行过程无先后顺序，例如，可以首先执行S301，确定待展示列表数据，进而执行步骤S302，生成待展示列表数据的空组件。还可以先执行S302，生成一个用于展示待展示列表数据的空组件，然后，执行S301，从目标列表数据中确定用于展示在该空组件中的待展示列表数据。
S303：基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据。
这里，显示组件是显示界面中目标列表数据的载体，子组件是显示组件的单元组件，显示组件可以由多个不同的子组件组成，每一个子组件可以是目标列表数据中的部分数据的载体；数据组件的生成规则用于定义各个子组件在显示组件中的相对位置关系。
具体实施时，同样可以基于CSS中的visibility(可见度)属性，根据待显示列表数据和数据组件的生成规则，在用户无感知的情况下，在空组件中生成包含多个子组件的显示组件。
在待展示列表数据中包含多个子列表数据的情况下，可以确定每个子列表数据所对应子组件，从而得到多个子组件。然后，可以确定每个子组件的组件展示高度。
这里，每个子组件的组件展示高度可以理解为能够完整展示该子组件对应的子列表数据时的高度。
基于此，可以基于每个子列表数据的数据属性，确定每个子组件的组件展示高度。这里，数据属性可以包含以下至少之一：数据类型(例如，图片、视频)、数据大小、数据状态(例如，静态图片或者动态图片)。
在确定出每个子组件的组件展示高度之后，就可以根据生成规则，确定每个子组件在显示组件中的相对位置关系。之后，就可以得到包含多个子组件的显示组件。
S304：在确定出满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
这里，组件展示高度是各子组件在显示界面中进行展示时的实际高度，不同的子组件，可以根据其中所承载的目标列表数据中的部分数据的格式、内容等信息的不同，存在不同的组件展示高度。
本公开实施例通过基于待展示列表数据和生成规则，为待展示列表数据生成显示组件，进而基于该显示组件确定每个子组件的组件展示高度的方式，可以准确的获取组件展示高度，进而避免由于子组件实际的展示高度与预定义高度不符而导致目标页面显示异常的问题。
在一个可选的实施方式中，该方法还包括如下步骤：
在所述空组件中生成所述显示组件之后，为每个所述子组件设置属性信息，其中，所述属性信息用于指示每个子组件对应的组件高度。
基于此，上述步骤S304基于所述显示组件，确定每个所述子组件的组件展示高度，包括：
针对所述显示组件中的每个子组件，从所述每个子组件的属性信息中读取每个子组件对应的组件高度值；确定读取的组件高度值为该子组件的组件展示高度。
这里，针对每个子组件，均包含对应的属性信息。其中，该属性信息可以为ClientHeight(客户端高度)属性。ClientHeight属性用于指示对应子组件的组件展示高度。
在空组件中生成包含多个子组件的显示组件之后，可以为每个子组件设置上述属性信息，即ClientHeight属性，其中，可以设置该ClientHeight属性为该子组件所对应的组件展示高度。
在确定出为每个子列表数据生成对应的子组件，且为该子组件设置对应的属性信息(例如，ClientHeight属性)之后，可以确定出满足数据获取条件，此时，可以基于显示组件，确定每个子组件的组件展示高度。
本公开实施中，可以通过遍历每个显示组件所包含的子组件的ClientHeight属性，从各子组件的ClientHeight属性中，确定各子组件的高度值，然后可以将该高度值作为其对应的子组件的组件展示高度，进而，可以获取显示组件所包括的各子组件的组件展示高度。
在本公开实施例中，通过为每个子组件设置对应ClientHeight属性，进而根据该ClientHeight属性确定每个子组件的组件展示高度的方式，可以减少计算机设备所维护的数据量，从而进一步减少计算设备的能耗，以提高用户体验。
在一个可选的实施方式中，该方法还包括如下步骤：
S31，响应于针对所述待展示列表数据的数据渲染指令，在所述显示界面的可视区域对所述待展示列表数据进行渲染；并在进行最底层渲染的过程中获取各个子组件的组件展示高度；
S32，根据每个所述子组件的组件展示高度，在所述可视区域的最上层渲染显示所述待展示列表数据。
在生成显示组件之后，还可以响应于用于针对待展示列表数据的数据渲染指令，在显示界面的可视区域对所述待展示列表数据进行渲染。其中，该数据渲染指令可以为用户针对目标页面上所展示的目标列表数据触发相应的滑动操作时生成的指令。
需要说明的是，在目标页面渲染待展示列表数据的渲染过程可以分成多层进行，按照由底层到高层的顺序进行。因此，在对目标页面渲染待展示列表数据的过程中，可以在进行最底层渲染的过程中获取待显示列表数据对应的各个子组件的组件展示高度，然后在确定各个子组件的组件展示高度之后，可以在进行最上层渲染的时候，根据各个子组件的组件展示高度对待显示列表数据进行渲染显示。
在本公开实施例中，在目标页面中对待展示列表数据进行渲染时，通过获取为每个子组件确定出的实际展示高度(即，组件展示高度)，并根据该实际展示高度对待展示列表数据进行渲染的方式，可以避免由于子组件实际的展示高度与预定义高度不符而导致目标页面显示异常的问题，从而提高用户针对该目标页面的访问体验。
在一个可选的实施方式中，该方法还包括如下步骤：
S41，根据每个所述子组件的组件展示高度，建立每个所述子组件的组件标识与每个所述子组件的组件展示高度之间的映射关系；
S42，根据所述映射关系生成组件高度列表，其中，所述组件高度列表中的组件展示高度用于在所述可视区域渲染所述待展示列表数据。
在本公开技术方案中，针对显示组件中的每个子组件均对应相应的子组件标识。因此，在获取各子组件的组件展示高度之后，可以建立子组件标识与其对应的子组件的组件展示高度之间的映射关系，根据建立的子组件标识与子组件的组件展示高度之间的映射关系生成组件高度列表，从而可以得到该显示组件对应的组件高度列表。
在基于子组件标识与子组件的组件展示高度之间的映射关系得到组件高度列表之后，为了节约内存，可以删除生成的显示组件。这里，每一个子组件的组件展示高度已经被记录，在需要获取组件展示高度时，可以根据子组件标识从组件高度列表中确定。
在本公开实施例中，该方法还包括：
(1)、响应于所述待展示列表数据的数据渲染指令，获取所述组件高度列表；
(2)、基于所述组件高度列表中的组件展示高度，在所述可视区域渲染所述待展示列表数据。
在本公开实施例中，在根据映射关系生成组件高度列表之后，若检测到用户针对目标页面上所展示的目标列表数据触发的滑动操作，则确定检测到数据渲染指令，此时，可以获取组件高度列表，进而根据组件高度列表中子组件标识确定每个子组件所对应的组件展示高度，进而基于确定出的组件展示高度，在可视区域渲染待展示列表数据。
具体实施时，可以在检测到数据渲染指令之后，确定数据渲染指令中所包含待渲染组件的组件标识。之后，就可以从组件高度列表中确定与该组件标识相对应的子组件标识，并确定该子组件标识所对应的组件展示高度。之后，就可以根据确定出的组件展示高度，对待渲染组件进行渲染。
例如，待渲染组件可以根据获得的高度列表，利用高度列表所包括的子组件的子组件标识作为键值查找高度列表中对应的子组件标识，进而，根据该子组件标识确定其所包括的子组件的组件展示高度，并进行后续的渲染等页面显示优化操作。如图4所示，为待渲染组件根据获得的高度列表渲染页面后的显示示意图。
在一种实施例中，针对步骤S304，确定出当前时刻满足数据获取条件，包括如下步骤：
步骤S3041，获取预先为每个所述显示组件中的每个子组件设置的组件标签；
步骤S3042，在确定出所述组件标签发生变化的情况下，确定所述当前时刻满足所述数据获取条件。
为了在显示组件生成后及时获取其包含的子组件的组件展示高度，在生成空组件之后，需要判断空组件中的显示组件是否生成完毕，在确定显示组件已生成完毕的情况下，确定出当前时刻满足数据获取条件，此时，就可以根据显示组件中所包含的子组件的ClientHeight属性，获取各子组件的组件展示高度。
关于判断空组件中的显示组件是否生成完毕这一步骤，根据本公开实施例，可以通过监听显示组件生成事件来触发。即确定监听到显示组件生成事件后可以确定显示组件已生成完毕，进而可以触发执行步骤S304。
具体实施时，显示组件生成完成时会修改引用值(引用值即为指代显示组件的标签，该标签会从一开始的空值(由于显示组件还没有生成，所以该标签值为空值)变成显示组件本身(显示组件生成后，标签值指代的就是显示组件本身)。基于此，本公开实施例中，可以通过监听引用值的改变来获取事件信号，当引用值改变时，可以确定显示组件已生成完毕；如果未监听到引用值的改变，说明显示组件还没有生成完毕，那么继续保持监听。
为了更好地理解本公开实施例，以下结合页面组件高度确定方法的实施流程对本公开实施的实施过程进行说明。参见图5所示，可以包括以下步骤：
S501：获取目标页面的待显示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据。
这里，待展示列表数据可以理解为还未展示到显示界面的可视区域内的列表数据；或者，可以理解为在未来时刻(或者下一时刻)即将展示到显示界面的可视区域内的列表数据。
S502：生成用于展示所述待展示列表数据的空组件。
这里，目标页面可以在计算机设备的显示界面上进行显示，基于计算机设备的显示界面的大小，目标列表数据可能无法通过目标页面一次就在显示界面中完全显示，因此可以基于用户在显示界面上的滑动操作，在客户端的显示界面中通过目标页面分次展示目标列表数据，目标页面每次可以展示部分目标列表数据。
这里，空组件可以理解为一个容器，该容器用于展示待显示列表数据的显示组件。
S503：基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据。
这里，显示组件是显示界面中目标列表数据的载体，子组件是显示组件的单元组件，显示组件可以由多个不同的子组件组成，每一个子组件可以是目标列表数据中的部分数据的载体；数据组件的生成规则用于定义各个子组件在显示组件中的相对位置关系。
S504：判断是否监听到显示组件已生成事件。
如果是，执行步骤S505，如果否，继续监听。
具体实施时，显示组件生成完成时会修改引用值(引用值即为指代显示组件的标签，该标签会从一开始的空值(由于显示组件还没有生成，所以该标签值为空值)变成显示组件本身(显示组件生成后，标签值指代的就是显示组件本身))。基于此，本公开实施例中，可以通过监听引用值的改变来获取事件信号，当引用值改变时，可以确定显示组件已生成完毕；如果未监听到引用值的改变，说明显示组件还没有生成完毕，那么继续保持监听。
S505：遍历生成的显示组件，确定显示组件所包括的各子组件的组件展示高度。
本步骤中，可以通过遍历显示组件中每个显示子组件的ClientHeight属性获得每个显示子组件的展示高度并记录。
S506：根据确定的各子组件的组件展示高度，建立子组件标识与子组件的组件展示高度之间的映射关系。
在一个实施例中，在建立映射关系时，基于生成的显示组件本身有序的特性，可以根据子组件在显示组件中的指数(即为当前子组件是在显示组件中的第几个)作为子组件标识，建立子组件标识和子组件的组件展示高度之间的映射关系。
然后可以根据建立的映射关系，生成可以用于表示各子组件的展示高度的组件高度列表。
S507：删除生成的显示组件。
本步骤中，当生成关联好的高度列表后，代表获取子组件的组件展示高度的流程已经全部完成，为了降低内存负担，可以删除已生成的显示组件。
S508：响应于所述待展示列表数据的数据渲染指令，获取所述组件高度列表。
本步骤中，根据已经建立好的子组件标识和子组件的组件展示高度之间的映射关系，当有一个或多个待渲染组件需要预知其组件展示高度来进行页面展示的时候，将已经建立好的高度列表传递给相应的待渲染组件来完成页面渲染展示。
S509：基于所述组件高度列表中的组件展示高度，在所述可视区域渲染所述待展示列表数据。
本公开实施例通过基于待展示列表数据和生成规则，为待展示列表数据生成显示组件，进而基于该显示组件确定每个子组件的组件展示高度的方式，可以准确的获取组件展示高度，进而避免由于子组件实际的展示高度与预定义高度不符而导致目标页面显示异常的问题。
参见图6所示，为本公开实施例提供的一种页面组件高度确定装置的示意图，包括：
获取单元601，用于获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据；
第一生成单元602，用于生成用于展示所述待展示列表数据的空组件；
第二生成单元603，用于基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据；
确定单元604，用于在确定出当前时刻满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
在一种可能的实施方式中，所述装置，还用于：响应于针对所述待展示列表数据的数据渲染指令，在所述显示界面的可视区域对所述待展示列表数据进行渲染；并在进行最底层渲染的过程中获取各个子组件的组件展示高度；根据每个所述子组件的组件展示高度，在所述可视区域的最上层渲染显示所述待展示列表数据。
在一种可能的实施方式中，所述装置，还用于：根据每个所述子组件的组件展示高度，建立每个所述子组件的组件标识与每个所述子组件的组件展示高度之间的映射关系；根据所述映射关系生成组件高度列表，其中，所述组件高度列表中的组件展示高度用于在所述可视区域渲染所述待展示列表数据。
在一种可能的实施方式中，所述装置，还用于：响应于所述待展示列表数据的数据渲染指令，获取所述组件高度列表；基于所述组件高度列表中的组件展示高度，在所述可视区域渲染所述待展示列表数据。
在一种可能的实施方式中，所述装置，还用于：在得到所述组件高度列表之后，删除所述显示组件。
在一种可能的实施方式中，所述装置，还用于确定出当前时刻满足数据获取条件，具体包括：获取预先为每个所述显示组件中的每个子组件设置的组件标签；在确定出所述组件标签发生变化的情况下，确定所述当前时刻满足所述数据获取条件。
在一种可能的实施方式中，所述装置，还用于：在所述空组件中生成所述显示组件之后，为每个所述子组件设置属性信息，其中，所述属性信息用于指示每个子组件对应的组件高度；所述确定单元，还用于：针对所述显示组件中的每个子组件，从所述每个子组件的属性信息中读取每个子组件对应的组件高度值；确定读取的组件高度值为该子组件的组件展示高度。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
本公开实施例还提供了一种计算机设备，如图6所示，为本公开实施例提供的一种计算机设备结构示意图，包括：
处理器71和存储器72；所述存储器72存储有处理器71可执行的机器可读指令，处理器71用于执行存储器72中存储的机器可读指令，所述机器可读指令被处理器71执行时，处理器71执行下述步骤：
获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据；
生成用于展示所述待展示列表数据的空组件；
基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据；
在确定出当前时刻满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
上述存储器72包括内存721和外部存储器722；这里的内存721也称内存储器，用于暂时存放处理器71中的运算数据，以及与硬盘等外部存储器722交换的数据，处理器71通过内存721与外部存储器722进行数据交换。
上述指令的具体执行过程可以参考本公开实施例中所述的页面组件高度确定方法的步骤，此处不再赘述。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面组件高度确定方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例所提供的页面组件高度确定方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面组件高度确定方法的步骤，具体可参见上述方法实施例，在此不再赘述。该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种页面组件高度确定方法，其特征在于，包括：
获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据；
生成用于展示所述待展示列表数据的空组件；
基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据；
在确定出当前时刻满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
响应于针对所述待展示列表数据的数据渲染指令，在所述显示界面的可视区域对所述待展示列表数据进行渲染；并在进行最底层渲染的过程中获取各个子组件的组件展示高度；
根据每个所述子组件的组件展示高度，在所述可视区域的最上层渲染显示所述待展示列表数据。
3.根据权利要求1所述的方法，其特征在于，所述方法还包括：
根据每个所述子组件的组件展示高度，建立每个所述子组件的组件标识与每个所述子组件的组件展示高度之间的映射关系；
根据所述映射关系生成组件高度列表，其中，所述组件高度列表中的组件展示高度用于在所述可视区域渲染所述待展示列表数据。
4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
响应于所述待展示列表数据的数据渲染指令，获取所述组件高度列表；
基于所述组件高度列表中的组件展示高度，在所述可视区域渲染所述待展示列表数据。
5.根据权利要求3所述的方法，其特征在于，所述方法还包括：
在得到所述组件高度列表之后，删除所述显示组件。
6.根据权利要求1所述的方法，其特征在于，所述确定出当前时刻满足数据获取条件，包括：
获取预先为每个所述显示组件中的每个子组件设置的组件标签；
在确定出所述组件标签发生变化的情况下，确定所述当前时刻满足所述数据获取条件。
7.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在所述空组件中生成所述显示组件之后，为每个所述子组件设置属性信息，其中，所述属性信息用于指示每个子组件对应的组件高度；
所述基于所述显示组件，确定每个所述子组件的组件展示高度，包括：
针对所述显示组件中的每个子组件，从所述每个子组件的属性信息中读取每个子组件对应的组件高度值；
确定读取的组件高度值为该子组件的组件展示高度。
8.一种页面组件高度确定装置，其特征在于，包括：
获取单元，用于获取目标页面的待展示列表数据；其中，所述待展示列表数据为目标列表数据中待渲染到所述目标页面对应的显示界面的可视区域内的数据；
第一生成单元，用于生成用于展示所述待展示列表数据的空组件；
第二生成单元，用于基于所述待展示列表数据和列表组件的生成规则，在所述空组件中生成显示组件，其中，所述显示组件包含多个子组件，每个子组件用于展示对应的待展示列表数据；
确定单元，用于在确定出当前时刻满足数据获取条件的情况下，基于所述显示组件，确定每个所述子组件的组件展示高度。
9.一种计算机设备，其特征在于，包括：处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述处理器执行如权利要求1至7任意一项所述的页面组件高度确定方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被计算机设备运行时，所述计算机设备执行如权利要求1至7任意一项所述的页面组件高度确定方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110852895.1A CN113504964B (zh) | 2021-07-27 | 2021-07-27 | 页面组件高度确定方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110852895.1A CN113504964B (zh) | 2021-07-27 | 2021-07-27 | 页面组件高度确定方法、装置、计算机设备和存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113504964A true CN113504964A (zh) | 2021-10-15 |
| CN113504964B CN113504964B (zh) | 2023-12-05 |
Family
ID=78014262
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110852895.1A Active CN113504964B (zh) | 2021-07-27 | 2021-07-27 | 页面组件高度确定方法、装置、计算机设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113504964B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114090165A (zh) * | 2021-11-24 | 2022-02-25 | 北京字节跳动网络技术有限公司 | 页面组件展示位置调整方法、装置、计算机设备及介质 |
| CN114154470A (zh) * | 2021-11-09 | 2022-03-08 | 广州市玄武无线科技股份有限公司 | 一种基于动态行高的表格处理方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100002041A1 (en) * | 2003-01-16 | 2010-01-07 | Silverbrook Research Pty Ltd | Configurable system for creating 3d object |
| CN109684574A (zh) * | 2018-08-20 | 2019-04-26 | 平安普惠企业管理有限公司 | 页面加载方法、装置、设备及存储介质 |
| CN110941784A (zh) * | 2019-11-13 | 2020-03-31 | 北京三快在线科技有限公司 | 一种页面生成的方法及装置 |
| CN111767051A (zh) * | 2020-06-30 | 2020-10-13 | 平安国际智慧城市科技股份有限公司 | 一种网络页面的渲染方法及设备 |
| CN112181408A (zh) * | 2019-07-02 | 2021-01-05 | 北京京东尚科信息技术有限公司 | 在应用程序前端页面显示视图列表的方法和装置 |
-
2021
- 2021-07-27 CN CN202110852895.1A patent/CN113504964B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100002041A1 (en) * | 2003-01-16 | 2010-01-07 | Silverbrook Research Pty Ltd | Configurable system for creating 3d object |
| CN109684574A (zh) * | 2018-08-20 | 2019-04-26 | 平安普惠企业管理有限公司 | 页面加载方法、装置、设备及存储介质 |
| CN112181408A (zh) * | 2019-07-02 | 2021-01-05 | 北京京东尚科信息技术有限公司 | 在应用程序前端页面显示视图列表的方法和装置 |
| CN110941784A (zh) * | 2019-11-13 | 2020-03-31 | 北京三快在线科技有限公司 | 一种页面生成的方法及装置 |
| CN111767051A (zh) * | 2020-06-30 | 2020-10-13 | 平安国际智慧城市科技股份有限公司 | 一种网络页面的渲染方法及设备 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114154470A (zh) * | 2021-11-09 | 2022-03-08 | 广州市玄武无线科技股份有限公司 | 一种基于动态行高的表格处理方法 |
| CN114090165A (zh) * | 2021-11-24 | 2022-02-25 | 北京字节跳动网络技术有限公司 | 页面组件展示位置调整方法、装置、计算机设备及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113504964B (zh) | 2023-12-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP5905541B2 (ja) | 階層的に編成されるコントロールギャラリ | |
| US10229655B2 (en) | Contextual zoom | |
| US9043698B2 (en) | Method for users to create and edit web page layouts | |
| US9582612B2 (en) | Space constrained ordered list previews | |
| RU2662632C2 (ru) | Представление документов фиксированного формата в формате с измененной компоновкой | |
| CN113504964A (zh) | 页面组件高度确定方法、装置、计算机设备和存储介质 | |
| CN105335445A (zh) | 布局显示方法和装置 | |
| US10089120B2 (en) | Widgets in digital dashboards | |
| US20140337808A1 (en) | Space Constrained Small Format Visual Analytic Labeling | |
| JP2021512415A (ja) | デジタルコンポーネントのバックドロップレンダリング | |
| US20200349210A1 (en) | Context Aware Skim-Read Friendly Text View | |
| CN113849713A (zh) | 一种搜索结果展现方法、装置、计算机设备及存储介质 | |
| JP6199917B2 (ja) | 携帯機器における可読性の改善 | |
| US10169734B2 (en) | Dynamic layout for organizational charts | |
| US8640055B1 (en) | Condensing hierarchies in user interfaces | |
| CN109800039B (zh) | 一种用户界面展示方法、装置、电子设备及存储介质 | |
| JP6344024B2 (ja) | 既読判断装置、既読判断方法および既読判断プログラム | |
| US10895974B2 (en) | Topic image flows | |
| EP2887240A1 (en) | Electronic product information display system | |
| US11763064B2 (en) | Glyph accessibility and swash control system | |
| CN113378059A (zh) | 一种页面展示方法、装置、计算机设备及存储介质 | |
| CN114090165A (zh) | 页面组件展示位置调整方法、装置、计算机设备及介质 | |
| CN115758019A (zh) | 页面的跳转方法、装置、计算机设备以及存储介质 | |
| US10073819B2 (en) | Media table for a digital document | |
| CN115203437A (zh) | 实体关系图的展示方法、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |