一种流式布局界面渲染的方法、装置以及电子设备制造方法及图纸

本申请公开了一种流式布局界面渲染的方法、装置以及电子设备。其中，流式布局界面渲染的方法包括：获取数据信息；按照预设的拆分方式对数据信息进行拆分，获取数据元素；根据数据信息在当前界面内待显示的数据内容，渲染对应待显示的数据内容的数据元素。所述方案通过对数据信息内的组件进行拆分，将组件拆分为几个更简单，且不容易再次拆分的原子化组件后，根据界面的显示位置，分批次的加载、渲染原子化组件，一次加载一界面，当对界面滚动时再加载、渲染下一界面，无需等待所有组件渲染完成后才开始显示，能够边渲染边显示，且渲染完成的组件可以立即响应操作，缩短了显示界面时的等待时间，从而提高组件的显示效率，使用户有更好的用户体验。

A Flow Layout Interface Rendering Method, Device and Electronic Equipment

This application discloses a method, device and electronic device for rendering a flow layout interface. Among them, the methods of rendering the flow layout interface include: acquiring data information; splitting data information according to the preset splitting method to obtain data elements; rendering data elements of data content to be displayed according to data information in the current interface. After splitting the components in the data information into several atomized components which are simpler and not easy to be splitted again, according to the display position of the interface, the atomized components are loaded and rendered in batches, one interface is loaded at a time, and the next interface is loaded and rendered when the interface is scrolled, without waiting for all the components to be rendered. It shows that the component can be displayed while rendering, and the rendered component can respond to the operation immediately, which shortens the waiting time of the display interface, thus improving the display efficiency of the component and making the user have a better user experience.

【技术实现步骤摘要】
一种流式布局界面渲染的方法、装置以及电子设备
本申请涉及界面显示处理
，具体涉及一种流式布局界面渲染的方法；本申请同时涉及一种流式布局界面渲染的装置以及一种电子设备。
技术介绍
随着互联网技术的发展，浏览信息的方式也呈现出多样性，例如通过浏览器浏览网页或通过客户端的界面展示信息。在浏览信息的过程中，浏览图片或者文字是用户浏览时获取的主要信息资源。为提升浏览信息的效果及便捷浏览过程，目前多采用流式布局实现信息的加载以及呈现。流式布局是比较流行的一种界面布局，视觉表现为参差不齐的多栏布局，随着界面向下滚动、拉动时，流式布局不断加载数据并附加至当前尾部。例如：获取流式布局中的至少一个待显示的对象(对象可以是图片、文字、超链接或容器等)，通过界面向下滚动或拉动，不断加载流式布局中待显示的对象。流式布局可以应用在当需要同时显示大量的图片、文字和链接等对象时，尤其在用户触发滚动操作或下拉操作较多的情况下，且流式布局应用了百分比宽度，因此可以自适应用户的分辨率，对用户更友好。目前在客户端中是通过List列表的方式实现流式布局，长数据可以通过每次只展现在当前屏幕中的数据，并在滑动过程中复用组件加载新的数据。List的组件比较固定，都是以表格为单位，需要在加载完成后才能展现单位内的内容，并且每个单位中的样式也需要基本相同。由此可见，通过现有的流式布局实现包括组件加载和渲染在内的所有的功能时，需要等待所有组件全部加载完成后才能够开始渲染，且渲染过程中不能进行任何操作，显示界面的等待时间长，影响用户体验，且不利于不同的组件及组件之间的组合的加载、渲染，从而导致大大增加了使用和维护的成本。
技术实现思路
本申请提供了一种流式布局界面渲染的方法，以解决现有技术中的上述问题。本申请同时提供了一种流式布局界面渲染的装置以及一种电子设备。本申请实施例提供了一种流式布局界面渲染的方法，所述流式布局界面渲染的方法，包括：获取数据信息；按照预设的拆分方式对所述数据信息进行拆分，获取数据元素；根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素。优选的，所述数据信息，包括：数据信息的格式以及数据信息内的数据文件。优选的，所述按照预设的拆分方式对所述数据信息进行拆分，获取数据元素，包括：按照预设的拆分方式对所述数据信息内的数据文件进行拆分，获取数据元素。优选的，所述预设的拆分方式，包括：将所述数据信息内的数据文件拆分为数据元素；或者按照预设的组合方式，将所述数据信息内的数据文件拆分为数据元素的组合。优选的，所述待显示的数据内容，包括：按照界面的显示流向，在所述界面中已显示的数据内容之后的，至少一个对应所述界面尺寸的数据内容。优选的，所述根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素，包括：根据所述数据信息在当前界面内的待显示的数据内容，获取对应所述数据内容内的数据文件已拆分出的数据元素；对获取的所述数据元素进行渲染。优选的，在所述获取对应所述数据内容内的数据文件已拆分出的数据元素的步骤之后，包括：根据所述数据信息中数据信息的格式，以所述数据元素创建在当前界面内待显示的数据内容。优选的，所述以所述数据元素创建在当前界面内待显示的数据内容的步骤之后，包括：判断所述数据元素中是否具有已渲染的数据元素；若具有，则判断所述已渲染的数据元素在所述待显示的数据内容中的格式，与所述已渲染的数据元素在被渲染时的格式是否对应；若不对应，则为所述已渲染的数据元素添加渲染标识。优选的，所述对获取的所述数据元素进行渲染，包括：对获取的所述数据元素中，未渲染的数据元素进行渲染；以及对携带渲染标识的已渲染的数据元素进行渲染。优选的，所述数据元素，至少包括：图片、文本以及容器。优选的，所述界面，包括：客户端动态界面以及web界面。本申请同时提供一种流式布局界面渲染的装置，包括：数据信息获取单元，用于获取数据信息；数据拆分单元，用于按照预设的拆分方式对所述数据信息进行拆分，获取数据元素；界面渲染单元，用于根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素。本申请同时提供一种电子设备，所述电子设备，包括：处理器；存储器，用于存储界面渲染程序，所述程序在被所述处理器读取执行时，执行如下操作：获取数据信息；按照预设的拆分方式对所述数据信息进行拆分，获取数据元素；根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素。与现有技术相比，本申请具有以下优点：本申请提供的一种流式布局界面渲染的方法、装置以及电子设备，通过获取数据信息；按照预设的拆分方式对所述数据信息进行拆分，获取数据元素；根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素。所述技术方案通过对数据信息内的组件进行拆分，将所述组件拆分为几个更小更简单，且不容易再次拆分的原子化组件后，根据界面的显示位置，分批次的加载、渲染原子化组件，一次加载一界面(屏幕的尺寸)，当对界面下拉或滚动时再加载、渲染下一界面，无需等待所有组件均渲染完成后才开始显示，能够边渲染边显示，并且渲染完成的原子化组件可以立即响应用户的操作，缩短了显示界面时的等待时间，有效利用了组件渲染的时间，从而达到提高组件的显示效率的效果，使用户有更好的用户体验。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。图1示出了根据本申请的实施例提供的流式布局界面渲染的方法的流程图；图2示出了根据本申请的实施例提供的按照预设的拆分方式对所述数据信息进行拆分获取数据元素的示意图；图3示出了根据本申请的实施例提供的确定待显示的数据内容的示意图；图4示出了根据本申请的实施例提供的根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素；图5示出了根据本申请的实施例提供的流式布局界面渲染的装置的示意图；图6示出了根据本申请的实施例提供的电子设备的示意图。具体实施方式为了能够更清楚地理解本申请的上述目的、特征和优点，下面结合附图和具体实施方式对本申请进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是，本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此，本申请不受下面公开的具体实施的限制。本申请的实施例提供了一种流式布局界面渲染的方法；本申请实施例同时涉及一种流式布局界面渲染的装置以及一种电子设备。在下面的实施例中逐一进行详细说明。目前在客户端中是通过List列表的方式实现流式布局，长数据可以通过每次只展现在当前屏幕中的数据，并在滑动过程中复用组件加载新的数据。List的组件比较固定，都是以表格为单位，需要在加载完成后才能展现单位内的内容，并且每个单位中的样式也需要基本相同。由此可见，通过现有的流式布局实现包括组件加载和渲染在内的所有本文档来自技高网...

【技术保护点】
1.一种流式布局界面渲染的方法，其特征在于，包括：获取数据信息；按照预设的拆分方式对所述数据信息进行拆分，获取数据元素；根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素。

【技术特征摘要】
1.一种流式布局界面渲染的方法，其特征在于，包括：获取数据信息；按照预设的拆分方式对所述数据信息进行拆分，获取数据元素；根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素。2.根据权利要求1所述的流式布局界面渲染的方法，其特征在于，所述数据信息，包括：数据信息的格式以及数据信息内的数据文件。3.根据权利要求2所述的流式布局界面渲染的方法，其特征在于，所述按照预设的拆分方式对所述数据信息进行拆分，获取数据元素，包括：按照预设的拆分方式对所述数据信息内的数据文件进行拆分，获取数据元素。4.根据权利要求3所述的流式布局界面渲染的方法，其特征在于，所述预设的拆分方式，包括：将所述数据信息内的数据文件拆分为数据元素；或者按照预设的组合方式，将所述数据信息内的数据文件拆分为数据元素的组合。5.根据权利要求1所述的流式布局界面渲染的方法，其特征在于，所述待显示的数据内容，包括：按照界面的显示流向，在所述界面中已显示的数据内容之后的，至少一个对应所述界面尺寸的数据内容。6.根据权利要求3所述的流式布局界面渲染的方法，其特征在于，所述根据所述数据信息在当前界面内待显示的数据内容，渲染对应所述待显示的数据内容的数据元素，包括：根据所述数据信息在当前界面内的待显示的数据内容，获取对应所述数据内容内的数据文件已拆分出的数据元素；对获取的所述数据元素进行渲染。7.根据权利要求6所述的流式布局界面渲染的方法，其特征在于，在所述获取对应所述数据内容内的数据文件已拆分出的数据元素的步骤之后，包括：根据所述数据信息中数据信息的格式，以所述数据...

【专利技术属性】
技术研发人员：施子捷，葛高松，景光宇，黄金涌，欧阳华，徐昭，赵锦江，叶斌，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY