CN113835575A - 一种信息展示的方法、装置、电子设备和存储介质 - Google Patents

Abstract

本申请提供了一种信息展示的方法、装置、电子设备和存储介质，其中，该方法包括：响应于包含走马灯子组件的父组件的渲染请求，从走马灯子组件中确定第一渲染数据；根据第一渲染数据中的走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算显示块的第一数量；若所述第一数量为非整数，则根据走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值；基于所述第二显示间隔值和所述第一数量的整数数值，更新走马灯子组件中的第一渲染数据，并基于父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。本申请实施例通过上述方法，能够自动调整走马灯区域内的显示布局。

Description

一种信息展示的方法、装置、电子设备和存储介质

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种信息展示的方法、装置、电子设备和存储介质。

背景技术

随着科学的进步，出现了基于互联网浏览器的Web(world wide web，全球广域网)应用程序技术。Web应用程序技术的特点是访问方便，用户在使用的时候，只需要在浏览器中进行浏览，不需要额外安装其余的软件。在通过Web进行内容展示的时候，通常需要对某些显示内容进行循环播放。

循环播放是指将一组显示内容以一定时间间隔进行循环滚动播放，循环播放的时间是可以切换的，而网页设计与平面设计最大的不同，就是要在视觉和信息传递中寻找一个平衡，并提供给用户交互体验。

发明内容

有鉴于此，本申请实施例提供了一种信息展示的方法、装置、电子设备和存储介质，以能够自动调整走马灯区域内的显示布局。

第一方面，本申请实施例提供了一种信息展示的方法，所述方法包括：

响应于包含走马灯子组件的父组件的渲染请求，从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据；其中，所述第一渲染数据包括所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表；所述显示块用于显示所述显示列表中的显示内容；

根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量；

若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值；

基于所述第二显示间隔值和所述第一数量的整数数值，更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

在一个可行的实施方案中，在从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据之前，还包括：

从包含走马灯子组件的父组件中获取第一渲染数据，通过所述父组件与所述走马灯子组件绑定的接口，将所述父组件中的第一渲染数据保存到所述走马灯子组件中；

当监听到所述父组件中的第一渲染数据发生变化时，将变化的所述第一渲染数据通过所述接口更新到所述走马灯子组件中。

在一个可行的实施方案中，根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量，包括：

获取所述第一渲染数据中用于表示所述走马灯区域所在区域的至少三个边缘点的显示位置数据；

在由所述至少三个边缘点的显示位置数据构成的预测区域上，计算所述预测区域在水平方向上的最大宽度；其中，所述预测区域是将所述至少三个边缘点按照预设方向依次直线相连得到的；

基于所述最大宽度确定所述走马灯区域的宽度，并基于所述走马灯区域的宽度、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

在一个可行的实施方案中，渲染出所述走马灯区域，包括：

将目标数量的每个显示块，以所述第二显示间隔值作为水平间隔，放置在所述走马灯区域中；其中，所述目标数量为所述第一数量的整数数值；

针对每一个显示块，在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容；其中，与所述显示块相邻的预设方向上的下一显示块中显示在所述显示列表中顺序在所述显示块当前显示内容的后一个显示内容。

在一个可行的实施方案中，所述方法还包括：

针对每个所述显示块，当所述走马灯区域所在的页面监听到所述显示块所在的位置，触发点击事件时，突出显示所述显示块；

针对突出显示的所述显示块，在所述走马灯区域的扩展位置，显示所述显示块当前显示内容的扩展内容；其中，所述第一渲染数据中包括所述扩展内容。

在一个可行的实施方案中，在所述走马灯区域中设置前移控件和后移控件，所述方法还包括：

当所述走马灯区域所在的页面监听到所述前移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的前一个显示内容；

当所述走马灯区域所在的页面监听到所述后移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的后一个显示内容。

在一个可行的实施方案中，所述方法还包括：

当所述走马灯区域所在的页面监听到所述走马灯区域内，触发鼠标悬停事件时，固定每个所述显示块中显示的显示内容。

第二方面，本申请实施例还提供了一种信息展示的装置，所述装置包括：

确定单元，用于响应于包含走马灯子组件的父组件的渲染请求，从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据；其中，所述第一渲染数据包括所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表；所述显示块用于显示所述显示列表中的显示内容；

第一计算单元，用于根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量；

第二计算单元，用于若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值；

渲染单元，用于基于所述第二显示间隔值和所述第一数量的整数数值，更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

在一个可行的实施方案中，所述装置还包括：

存储单元，用于在从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据之前，从包含走马灯子组件的父组件中获取第一渲染数据，通过所述父组件与所述走马灯子组件绑定的接口，将所述父组件中的第一渲染数据保存到所述走马灯子组件中；

更新单元，用于当监听到所述父组件中的第一渲染数据发生变化时，将变化的所述第一渲染数据通过所述接口更新到所述走马灯子组件中。

在一个可行的实施方案中，所述第一计算单元，用于：

获取所述第一渲染数据中用于表示所述走马灯区域所在区域的至少三个边缘点的显示位置数据；

在由所述至少三个边缘点的显示位置数据构成的预测区域上，计算所述预测区域在水平方向上的最大宽度；其中，所述预测区域是将所述至少三个边缘点按照预设方向依次直线相连得到的；

基于所述最大宽度确定所述走马灯区域的宽度，并基于所述走马灯区域的宽度、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

在一个可行的实施方案中，所述渲染单元，用于：

将目标数量的每个显示块，以所述第二显示间隔值作为水平间隔，放置在所述走马灯区域中；其中，所述目标数量为所述第一数量的整数数值；

针对每一个显示块，在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容；其中，与所述显示块相邻的预设方向上的下一显示块中显示在所述显示列表中顺序在所述显示块当前显示内容的后一个显示内容。

在一个可行的实施方案中，所述装置还包括：

提醒单元，用于针对每个所述显示块，当所述走马灯区域所在的页面监听到所述显示块所在的位置，触发点击事件时，突出显示所述显示块；

扩展单元，用于针对突出显示的所述显示块，在所述走马灯区域的扩展位置，显示所述显示块当前显示内容的扩展内容；其中，所述第一渲染数据中包括所述扩展内容。

在一个可行的实施方案中，所述装置还包括：

前移单元，用于在所述走马灯区域中设置前移控件和后移控件之后，当所述走马灯区域所在的页面监听到所述前移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的前一个显示内容；

后移单元，用于当所述走马灯区域所在的页面监听到所述后移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的后一个显示内容。

在一个可行的实施方案中，所述装置还包括：

固定单元，用于当所述走马灯区域所在的页面监听到所述走马灯区域内，触发鼠标悬停事件时，固定每个所述显示块中显示的显示内容。

第三方面，本申请实施例还提供了一种电子设备，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行如第一方面中任一项所述的方法的步骤。

第四方面，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如第一方面中任一项所述的方法的步骤。

本申请实施例提供的一种信息展示的方法、装置、电子设备和存储介质，将走马灯子组件引入到父组件中，从走马灯子组件中获取用于渲染出走马灯区域的第一渲染数据，从而根据第一渲染数据，渲染出用于向用户展示目标信息的走马灯区域，在该走马灯区域中，通过第一渲染数据中的走马灯区域的显示位置数据、显示块的宽度、各个显示块之间的第一显示间隔值，计算出在该走马灯区域能够显示的显示块的第一数量。在得到显示块的第一数量之后，若该第一数量为非整数，则说明走马灯区域中将会出现不完整的显示块，则根据走马灯区域显示位置数据、显示块的宽度、第一数量的整数数值，对各个显示块之间的第一显示间隔值进行调整，并将调整之后的值作为第二显示间隔值，根据第二显示间隔值和第一数量的整数数值，更新走马灯组件中的第一渲染数据，并根据父组件以及该第一渲染数据，渲染出走马灯区域。通过上述方法，能够自动调整走马灯区域内显示块的数量以及显示块之间的间隔，与现有技术中需要手动调整显示位置的方法相比，不会造成显示块之间距离不相等、各个显示块大小不一致或是需要反复手动调参等问题，调整位置的方法更加高效，界面也更加美观。

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

附图说明

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

图1示出了本申请实施例所提供的一种信息展示的方法的流程图。

图2示出了本申请实施例所提供的一种计算走马灯区域中显示块数量的流程图。

图3示出了本申请实施例所提供的计算走马灯区域的宽度的流程图。

图4示出了本申请实施例所提供的一种走马灯区域的显示图。

图5示出了本申请实施例所提供的第二种走马灯区域的显示图。

图6示出了本申请实施例所提供的第三种走马灯区域的显示图。

图7示出了本申请实施例所提供的一种信息展示的装置的结构示意图。

图8示出了本申请实施例所提供的一种信息展示的电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，应当理解，本申请中附图仅起到说明和描述的目的，并不用于限定本申请的保护范围。另外，应当理解，示意性的附图并未按实物比例绘制。本申请中使用的流程图示出了根据本申请的一些实施例实现的操作。应该理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本申请内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。

另外，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要提前说明的是，本申请实施例中将会用到术语“包括”，用于指出其后所声明的特征的存在，但并不排除增加其它的特征。

需要提前说明的是，本申请实施例涉及到的装置或电子设备等可以执行在单个服务器上，也可以执行在服务器组。服务器组可以是集中式的，也可以是分布式的。在一些实施例中，服务器相对于终端，可以是本地的，也可以是远程的。例如，服务器可以经由网络访问存储在服务请求方终端、服务提供方终端、或数据库、或其任意组合中的信息和/或数据。作为另一示例，服务器可以直接连接到服务请求方终端、服务提供方终端和数据库中至少一个，以访问存储的信息和/或数据。在一些实施例中，服务器可以在云平台上实现；仅作为示例，云平台可以包括私有云、公有云、混合云、社区云(community cloud)、分布式云、跨云(inter-cloud)、多云(multi-cloud)等，或者它们的任意组合。

现有技术中，发明人发现当设置的目标区域中无法对目标内容进行完整展示的时候，需要手动调整显示区域的大小，或是手动摆放显示内容所在的位置，通常需要手动调整多次参数之后，才能够在目标区域内设置好展示格式。

基于上述问题，图1示出了本申请实施例所提供的一种信息展示的方法的流程图，如图1所示，所述方法具体通过以下步骤实现：

步骤101、响应于包含走马灯子组件的父组件的渲染请求，从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据；其中，所述第一渲染数据包括所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表；所述显示块用于显示所述显示列表中的显示内容。

具体的，父组件为用户在开发工程时建立的开发页面，走马灯子组件是用于将父组件中的显示内容以走马灯形式显示的插件，所述父组件和走马灯子组件是基于VUE(用于构建用户界面的渐进式即时编译型的编程语言的框架)建立的。第一渲染数据是用户输入到父组件中的，然后通过父组件与走马灯子组件之间的接口关系，将父组件中的第一渲染数据保存到走马灯子组件中。在实际使用时，将走马灯子组件作为插件引入到父组件中，从而通过走马灯子组件以及该走马灯子组件中的第一渲染数据对父组件中的显示内容展示在走马灯区域。其中，走马灯区域的显示位置数据可以是用户在直接输入到父组件中的具体数值，也可以是在目标网页中选定走马灯区域后通过VUE父组件中的特殊属性ref(用于快速定位到文档对象模型的结构)获取DOM(Document Object Model，文档对象模型)元素的得到的，显示列表中包括用户设置的至少一条显示内容，第一渲染数据中还包括每条显示内容对应的至少一条扩展内容。显示块为在走马灯区域中用于展示显示内容的显示块，在走马灯区域中，至少设置一个显示块，显示块的宽度是用户预先设置的，也可以是根据显示块中的文本自动调整的；当走马灯区域中的显示块为两个及两个以上时，需要设置该两个显示块之间的宽度(第一显示间隔值)，用户预先设置一个第一显示间隔值，本申请实施例不对该第一显示间隔值的设置方法进行限制。

需要注意的是，第一渲染数据还包括文字颜色、背景颜色、是否自动播放、播放速度、滚动方向等其他数据，用户通过设置第一渲染数据中的文字颜色、背景颜色等，能够自定义走马灯区域的展示效果。

步骤102、根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

具体的，根据走马灯区域的显示位置数据，能够确定出走马灯区域所在的位置，该走马灯区域的大小，根据该走马灯区域的大小，每个显示块的宽度，以及各个显示块之间的第一显示间隔值，能够得到在该走马灯区域能够放置的显示块的第一数量。在本申请实施例中，默认每个显示块的大小和宽度均是相同的，各显示块之间的第一显示间隔值也是相同的，在实际应用时，每个显示块的大小可以是相同的，也可以是不同的；用于表示每两个显示块之间距离可以是相同的，也可以是不同的。

例如，当走马灯区域的宽度为10cm，每个显示块的宽度为3cm，第一显示间隔值为1cm，能够计算出该走马灯区域在宽度范围上，能够放置2.67个显示块。其中，本申请实施例提供的其中一种计算方法为：将每个显示快的宽度3cm与该第一显示间隔值1cm当作一个整体，取走马灯区域的宽度10cm除该整体(3+1)cm得到的整数2，以及10÷(3+1)得到的余数2，用该余数2÷每个显示块的宽度3得到0.67，用整数2+0.67得到在该走马灯区域能够显示显示块的第一数量为2.67个。

步骤103、若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值。

具体的，在步骤102计算出显示块的第一数量之后，判断第一数量是否为整数，当确定该第一数量为非整数时，则确定出在该走马灯区域会出现不完整的显示块，使得该走马灯区域显示界面不够美观，则通过选取该第一数量的整数数值，重新作为在该走马灯区域的显示块的个数，并根据走马灯区域的显示位置数据、显示块的宽度、和第一数量的整数数值(即调整后的走马灯区域的显示块的数量)，计算两两相邻显示块之间的第二显示间隔值。

例如，在步骤102中确定的第一数量为2.67，这意味着按照第一显示间隔值在该走马灯区域能够显示2.67个显示块，第三个显示块不能够完整显示，则将第一数量的整数数值2，作为该走马灯区域能够显示的显示块的个数，即在该走马灯区域显示的显示块的个数为2。由于对显示块的个数进行了调整，为了使得显示界面更加美观，重新调整显示块之间的宽度，将根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，计算得到的数值作为第二显示间隔值。即，根据上述例子，走马灯区域的宽度为10cm，放置两个3cm的显示块，则第二显示间隔值的大小为4cm。需要注意的是，在本申请实施例中，在所述走马灯区域设置了用于移动所述显示块中的显示内容的按钮控件，则在计算所述第一数量和所述第二显示间隔值时，还包括：

根据所述走马灯区域的显示位置数据、所述按钮控件的宽度、所述按钮控件与所述显示块之间的间隔值、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

本申请实施例提供了其中一种加入按钮控件的宽度之后，计算第一数量的方法，其中，按钮控件包括前移控件、后移控件；获取走马灯区域的显示位置数据、显示块的宽度、显示块之间的第一显示间隔值、前移控件的宽度、后移控件的宽度；通过走马灯区域的显示位置数据计算走马灯区域的宽度。则，显示块的第一数量的计算公式为：

其中，D₁为显示块的第一数量，screenWidth为走马灯区域的宽度，btnWidth为前移控件的宽度(前移控件的宽度与后移控件的宽度相等)，unitWidth为单元块的宽度，unitMargin为第一显示间隔值。

若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、所述按钮控件的宽度、所述按钮控件与所述显示块之间的间隔值、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值。

步骤104、基于所述第二显示间隔值和所述第一数量的整数数值，更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

具体的，在步骤103确定出所述第二显示间隔值之后，将走马灯子组件中的第一渲染数据更新为：走马灯区域的显示位置数据、显示块的宽度、第二显示间隔值、显示列表和用于表示所述走马灯区域的显示块的数量的第一数量的整数数值。根据走马灯子组件中更新后的第一渲染数据，响应于父组件中的渲染请求，渲染出走马灯区域。

在本申请实施例中，若第一数量为整数，说明根据第一显示间隔值，在所述走马灯区域能够显示第一数量的显示块且所述走马灯区域中的显示块均为完整的，即，若所述第一数量为整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值、显示块的第一数量更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

本申请实施例提供的一种信息展示的方法、装置、电子设备和存储介质，将走马灯子组件引入到父组件中，从走马灯子组件中获取用于渲染出走马灯区域的第一渲染数据，从而根据第一渲染数据，渲染出用于向用户展示目标信息的走马灯区域，在该走马灯区域中，通过第一渲染数据中的走马灯区域的显示位置数据、显示块的宽度、各个显示块之间的第一显示间隔值，计算出在该走马灯区域能够显示的显示块的第一数量。在得到显示块的第一数量之后，若该第一数量为非整数，则说明走马灯区域中将会出现不完整的显示块，则根据走马灯区域显示位置数据、显示块的宽度、第一数量的整数数值，对各个显示块之间的第一显示间隔值进行调整，并将调整之后的值作为第二显示间隔值，根据第二显示间隔值和第一数量的整数数值，更新走马灯组件中的第一渲染数据，并根据父组件以及该第一渲染数据，渲染出走马灯区域。通过上述方法，能够自动调整走马灯区域内显示块的数量以及显示块之间的间隔，与现有技术中需要手动调整显示位置的方法相比，不会造成显示块之间距离不相等、各个显示块大小不一致或是需要反复手动调参等问题，调整位置的方法更加高效，界面也更加美观。

在一个可行的实施方案中，在步骤101从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据之前，还通过以下步骤实现：

步骤1011、从包含走马灯子组件的父组件中获取第一渲染数据，通过所述父组件与所述走马灯子组件绑定的接口，将所述父组件中的第一渲染数据保存到所述走马灯子组件中。

具体的，父组件组走马灯子组件之间绑定的接口包括：父组件和走马灯子组件之间绑定的prop(property，属性)，用于从父组件向走马灯子组件发送数据；父组件和走马灯子组件之间绑定的event(事件属性)，用于从走马灯子组件向父组件发送信息。用户在父组件中输入第一渲染数据，通过父组件与所述走马灯子组件中的prop，将父组件中的第一渲染数据传递到走马灯子组件中，供走马灯子组件使用，完成父组件与走马灯子组件之间的组件传值。具体方法为，将父组件传递过来的第一渲染数据，在prop数组中定义一下，在走马灯子组件中使用prop数组中定义好的数据。第一渲染数据中的走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表和显示列表中的显示内容，均为prop，在走马灯子组件中，设置了第一渲染数据的默认值，当父组件中没有第一渲染数据的prop传入时，使用默认值进行走马灯区域展示。

步骤1012、当监听到所述父组件中的第一渲染数据发生变化时，将变化的所述第一渲染数据通过所述接口更新到所述走马灯子组件中。

具体的，所有prop都使得父组件与走马灯子组件之间形成了一个单向下行绑定，父组件的prop更新会向下流动到走马灯子组件中。每次父组件发生变更时，走马灯子组件中所有的prop都将会刷新为最新的值。

在一个可行的实施方案中，在步骤102根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量时，图2示出了本申请实施例所提供的一种计算走马灯区域中显示块数量的流程图，如图2所示，所述方法还通过以下步骤实现：

步骤201、获取所述第一渲染数据中用于表示所述走马灯区域所在区域的至少三个边缘点的显示位置数据。

具体的，走马灯区域的显示位置数据为用户在目标网页选择后输入到父组件中的，即，用于表示所述走马灯区域所在区域的至少三个边缘点的显示位置数据是用户预先输入到所述父组件中的，或是用户根据VUE中的ref获取的走马灯区域至少三个边缘点的显示位置数据。

步骤202、在由所述至少三个边缘点的显示位置数据构成的预测区域上，计算所述预测区域在水平方向上的最大宽度；其中，所述预测区域是将所述至少三个边缘点按照预设方向依次直线相连得到的。

具体的，图3示出了本申请实施例所提供的计算走马灯区域的宽度的流程图。如图3所示，A、B、C、D分别为用户选定的第一个边缘点、第二个边缘点、第三个边缘点、第四个边缘点，A、B、C、D分别对应着四个显示位置数据，当根据A、B、D三个边缘点的显示位置数据计算所述走马灯区域的宽度时，将所述三个边缘点A、B、D按照顺时针方向或逆时针方向，依次直线相连，得到A、B、D构成的三角形预测区域，计算该预测区域在水平方向上的最大宽度，如图3所示，该最大宽度为L1的大小。本申请实施例只是提供了其中一种计算走马灯区域宽度的解决方案，也可以根据用户选取的其他个数的边缘点的显示位置数据，计算走马灯区域的宽度。

步骤203、基于所述最大宽度确定所述走马灯区域的宽度，并基于所述走马灯区域的宽度、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

具体的，根据步骤202计算得到的最大宽度L1，作为该走马灯区域的宽度，在得到走马灯区域的宽度之后，根据走马灯区域的宽度、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

在一个可行的实施方案中，在步骤104中渲染出所述走马灯区域，还通过以下步骤实现：

步骤1041、将目标数量的每个显示块，以所述第二显示间隔值作为水平间隔，放置在所述走马灯区域中；其中，所述目标数量为所述第一数量的整数数值。

具体的，图4示出了本申请实施例所提供的一种走马灯区域的显示图。如图4所示，可知，在步骤103确定出第二显示间隔值以及显示块的第一数量的整数数值之后，得到在走马灯区域展示的显示块的数量为2，第二显示间隔值为4cm，则，在走马灯区域，包括显示块1和显示块2，将这2个显示块，以4cm的第二显示间隔值作为水平间隔，放置在走马灯区域中，展示效果如图所示，具体的，走马灯区域中的垂直方向上的间隔值可以是预先设置的，也可以是根据显示块的大小自动调整的。

图5示出了本申请实施例所提供的第二种走马灯区域的显示图，在图4的基础上，在走马灯区域中加入按钮控件，所述显示块1和显示块2的大小和宽度不发生变化，根据按钮控件的大小以及按钮控件与显示块之间的宽度，调整所述第二显示间隔值，具体的，如图5所示，所述走马灯区域包括左侧的前移控件、显示块1、显示块2和右侧的后移控件，显示块1和显示块2中的间隔大小为第二显示间隔值。前移控件和后移控件代表的显示列表中显示内容的移动方向可以是预先设置的，可以相互调换或进行其他方式的切换。

步骤1042、针对每一个显示块，在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容；其中，与所述显示块相邻的预设方向上的下一显示块中显示在所述显示列表中顺序在所述显示块当前显示内容的后一个显示内容。

具体的，在本申请实施例中，在步骤1041中图4或图5示出的走马灯区域中，包括显示块1和显示块2。假设第一渲染数据的显示列表中包含显示内容1、显示内容2、和显示内容3，第一渲染数据中为走马灯区域设置循环播放的顺序为按照显示列表中显示内容的先后顺序播放，播放周期为每3秒钟切换一次显示块中的显示内容，将显示列表中的显示内容首尾相接，构成循环显示列表，即，若按照显示列表中的先后顺序进行播放，则当显示列表中的最后一条显示内容播放完毕后，重新播放第一条显示内容。

则在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容，即：在0-3s时，显示块1显示所述显示内容1、显示块2显示所述显示内容2；在3-6s时，在显示块1中显示所述显示内容2、在显示块2中显示所述显示内容3；在6-9s时，在显示块1中显示所述显示内容3、在显示块2中显示所述显示内容1；在9-12s时，在显示块1中显示所述显示内容1、在显示块2中显示所述显示内容2；按照此方式循环播放所述显示列表中的显示内容。

在一个可行的实施方案中，在步骤104中渲染出所述走马灯区域，还通过以下步骤实现：

步骤1043、针对每个所述显示块，当所述走马灯区域所在的页面监听到所述显示块所在的位置，触发点击事件时，突出显示所述显示块。

具体的，当页面监听到显示块触发点击事件的时候，将所述显示块上移，或者将所述显示块的颜色进行切换，以突出该显示块和该显示块中的显示内容。

步骤1044、针对突出显示的所述显示块，在所述走马灯区域的扩展位置，显示所述显示块当前显示内容的扩展内容；其中，所述第一渲染数据中包括所述扩展内容。

具体的，图6示出了本申请实施例所提供的第三种走马灯区域的显示图，如图6所示，走马灯区域包括前移控件、后移控件、显示块1、显示块2和扩展位置。当点击显示块1时，对于触发点击事件的显示块进行突出显示，在走马灯区域设置的扩展位置，对突出显示的显示块中的显示内容的扩展内容进行显示。其中，扩展位置为预先设置的，可以对所述扩展位置进行更改，本申请不对突出显示的方式进行限制。

在一个可行的实施方案中，在执行步骤104时，在所述走马灯区域中设置前移控件和后移控件，所述方法还通过以下步骤实现：

当所述走马灯区域所在的页面监听到所述前移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的前一个显示内容。当所述走马灯区域所在的页面监听到所述后移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的后一个显示内容。

例如，如图6示出的走马灯区域中，包括显示块1和显示块2。假设第一渲染数据的显示列表中包含显示内容1、显示内容2、和显示内容3。

显示块1显示所述显示内容1、显示块2显示所述显示内容2。

若点击的是左侧按钮控件(前移控件)，在显示块1中显示所述显示内容3、在显示块2中显示所述显示内容1。

若点击的是右侧按钮控件(后移控件)，在显示块1中显示所述显示内容2、在显示块2中显示所述显示内容3。

或者，将二者的功能进行调换：

点击的是左侧按钮控件(前移控件)，在显示块1中显示所述显示内容2、在显示块2中显示所述显示内容3。

若点击的是右侧按钮控件(后移控件)，在显示块1中显示所述显示内容3、在显示块2中显示所述显示内容1。

在一个可行的实施方案中，所述方法还通过以下步骤实现：

当所述走马灯区域所在的页面监听到所述走马灯区域内，触发鼠标悬停事件时，固定每个所述显示块中显示的显示内容。

具体的，在本申请实施例中，走马灯区域中显示块的区域以及按钮控件所在的区域没有触发鼠标悬停事件时，执行步骤1042中针对每一个显示块，在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容的动作；当走马灯区域所在的页面监听到所述走马灯区域内的显示块的区域以及按钮控件所在的区域，触发鼠标悬停事件时，停止循环所述显示块中的显示内容，以方便用户进行交互。具体的，在本申请实施例中，当鼠标悬停时间超过预设时间长度时，继续在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容，以防止用户忘记将鼠标移出的情况。

图7示出了本申请实施例所提供的一种信息展示的装置的结构示意图，如图7所示，所述装置包括确定单元701、第一计算单元702、第二计算单元703、渲染单元704。

确定单元701，用于响应于包含走马灯子组件的父组件的渲染请求，从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据；其中，所述第一渲染数据包括所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表；所述显示块用于显示所述显示列表中的显示内容。

第一计算单元702，用于根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

第二计算单元703，用于若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值。

渲染单元704，用于基于所述第二显示间隔值和所述第一数量的整数数值，更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

在一个可行的实施方案中，所述装置还包括：

存储单元，用于在从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据之前，从包含走马灯子组件的父组件中获取第一渲染数据，通过所述父组件与所述走马灯子组件绑定的接口，将所述父组件中的第一渲染数据保存到所述走马灯子组件中。

更新单元，用于当监听到所述父组件中的第一渲染数据发生变化时，将变化的所述第一渲染数据通过所述接口更新到所述走马灯子组件中。

在一个可行的实施方案中，所述第一计算单元，用于：

获取所述第一渲染数据中用于表示所述走马灯区域所在区域的至少三个边缘点的显示位置数据。

在由所述至少三个边缘点的显示位置数据构成的预测区域上，计算所述预测区域在水平方向上的最大宽度；其中，所述预测区域是将所述至少三个边缘点按照预设方向依次直线相连得到的。

基于所述最大宽度确定所述走马灯区域的宽度，并基于所述走马灯区域的宽度、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

在一个可行的实施方案中，所述渲染单元，用于：

将目标数量的每个显示块，以所述第二显示间隔值作为水平间隔，放置在所述走马灯区域中；其中，所述目标数量为所述第一数量的整数数值。

针对每一个显示块，在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容；其中，与所述显示块相邻的预设方向上的下一显示块中显示在所述显示列表中顺序在所述显示块当前显示内容的后一个显示内容。

在一个可行的实施方案中，所述装置还包括：

提醒单元，用于针对每个所述显示块，当所述走马灯区域所在的页面监听到所述显示块所在的位置，触发点击事件时，突出显示所述显示块。

扩展单元，用于针对突出显示的所述显示块，在所述走马灯区域的扩展位置，显示所述显示块当前显示内容的扩展内容；其中，所述第一渲染数据中包括所述扩展内容。

在一个可行的实施方案中，所述装置还包括：

前移单元，用于在所述走马灯区域中设置前移控件和后移控件之后，当所述走马灯区域所在的页面监听到所述前移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的前一个显示内容。

后移单元，用于当所述走马灯区域所在的页面监听到所述后移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的后一个显示内容。

在一个可行的实施方案中，所述装置还包括：

固定单元，用于当所述走马灯区域所在的页面监听到所述走马灯区域内，触发鼠标悬停事件时，固定每个所述显示块中显示的显示内容。

本申请实施例提供的一种信息展示的方法、装置、电子设备和存储介质，将走马灯子组件引入到父组件中，从走马灯子组件中获取用于渲染出走马灯区域的第一渲染数据，从而根据第一渲染数据，渲染出用于向用户展示目标信息的走马灯区域，在该走马灯区域中，通过第一渲染数据中的走马灯区域的显示位置数据、显示块的宽度、各个显示块之间的第一显示间隔值，计算出在该走马灯区域能够显示的显示块的第一数量。在得到显示块的第一数量之后，若该第一数量为非整数，则说明走马灯区域中将会出现不完整的显示块，则根据走马灯区域显示位置数据、显示块的宽度、第一数量的整数数值，对各个显示块之间的第一显示间隔值进行调整，并将调整之后的值作为第二显示间隔值，根据第二显示间隔值和第一数量的整数数值，更新走马灯组件中的第一渲染数据，并根据父组件以及该第一渲染数据，渲染出走马灯区域。通过上述方法，能够自动调整走马灯区域内显示块的数量以及显示块之间的间隔，与现有技术中需要手动调整显示位置的方法相比，不会造成显示块之间距离不相等、各个显示块大小不一致或是需要反复手动调参等问题，调整位置的方法更加高效，界面也更加美观。

图8示出了本申请实施例所提供的一种信息展示的电子设备的结构示意图，包括：处理器801、存储介质802和总线803，所述存储介质802存储有所述处理器801可执行的机器可读指令，当电子设备运行如实施例中的信息展示的方法时，所述处理器801与所述存储介质802之间通过总线803通信，所述处理器801执行所述机器可读指令，以执行如实施例中的步骤。

在实施例中，所述存储介质802还可以执行其它机器可读指令，以执行如实施例中其它所述的方法，关于具体执行的方法步骤和原理参见实施例的说明，在此不再详细赘述。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行，以执行如实施例中的步骤。

在本申请实施例中，该计算机程序被处理器运行时还可以执行其它机器可读指令，以执行如实施例中其它所述的方法，关于具体执行的方法步骤和原理参见实施例的说明，在此不再详细赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

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

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

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

以上仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种信息展示的方法，其特征在于，所述方法包括：

响应于包含走马灯子组件的父组件的渲染请求，从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据；其中，所述第一渲染数据包括所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表；所述显示块用于显示所述显示列表中的显示内容；

根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量；

若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值；

基于所述第二显示间隔值和所述第一数量的整数数值，更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

2.根据权利要求1所述的方法，其特征在于，在从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据之前，还包括：

从包含走马灯子组件的父组件中获取第一渲染数据，通过所述父组件与所述走马灯子组件绑定的接口，将所述父组件中的第一渲染数据保存到所述走马灯子组件中；

当监听到所述父组件中的第一渲染数据发生变化时，将变化的所述第一渲染数据通过所述接口更新到所述走马灯子组件中。

3.根据权利要求1所述的方法，其特征在于，根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量，包括：

获取所述第一渲染数据中用于表示所述走马灯区域所在区域的至少三个边缘点的显示位置数据；

在由所述至少三个边缘点的显示位置数据构成的预测区域上，计算所述预测区域在水平方向上的最大宽度；其中，所述预测区域是将所述至少三个边缘点按照预设方向依次直线相连得到的；

基于所述最大宽度确定所述走马灯区域的宽度，并基于所述走马灯区域的宽度、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量。

4.根据权利要求1所述的方法，其特征在于，渲染出所述走马灯区域，包括：

将目标数量的每个显示块，以所述第二显示间隔值作为水平间隔，放置在所述走马灯区域中；其中，所述目标数量为所述第一数量的整数数值；

针对每一个显示块，在所述显示块中按照预设顺序依次循环显示所述显示列表中的每一个显示内容；其中，与所述显示块相邻的预设方向上的下一显示块中显示在所述显示列表中顺序在所述显示块当前显示内容的后一个显示内容。

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

针对每个所述显示块，当所述走马灯区域所在的页面监听到所述显示块所在的位置，触发点击事件时，突出显示所述显示块；

针对突出显示的所述显示块，在所述走马灯区域的扩展位置，显示所述显示块当前显示内容的扩展内容；其中，所述第一渲染数据中包括所述扩展内容。

6.根据权利要求4所述的方法，其特征在于，在所述走马灯区域中设置前移控件和后移控件，所述方法还包括：

当所述走马灯区域所在的页面监听到所述前移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的前一个显示内容；

当所述走马灯区域所在的页面监听到所述后移控件所在的位置，触发点击事件时，将每个所述显示块中的当前显示内容，更换为所述显示列表中顺序在所述当前显示内容的后一个显示内容。

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

当所述走马灯区域所在的页面监听到所述走马灯区域内，触发鼠标悬停事件时，固定每个所述显示块中显示的显示内容。

8.一种信息展示的装置，其特征在于，所述装置包括：

确定单元，用于响应于包含走马灯子组件的父组件的渲染请求，从所述走马灯子组件中确定用于渲染出走马灯区域的第一渲染数据；其中，所述第一渲染数据包括所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，以及显示列表；所述显示块用于显示所述显示列表中的显示内容；

第一计算单元，用于根据所述走马灯区域的显示位置数据、显示块的宽度和各个显示块之间的第一显示间隔值，计算所述显示块的第一数量；

第二计算单元，用于若所述第一数量为非整数，则根据所述走马灯区域的显示位置数据、显示块的宽度和所述第一数量的整数数值，确定第二显示间隔值；

渲染单元，用于基于所述第二显示间隔值和所述第一数量的整数数值，更新所述走马灯子组件中的第一渲染数据，并基于所述父组件以及更新后的第一渲染数据，渲染出所述走马灯区域。

9.一种电子设备，其特征在于，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行如权利要求1至7中任一项所述信息展示的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至7中任一项所述信息展示的方法的步骤。

Images