CN110262726A - 页面展示方法、装置及设备 - Google Patents

Abstract

本说明书实施例提供一种页面展示方法、装置及设备，在执行页面展示方法之前，先基于可见列表视图配置页面，该可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图。上述组视图被配置为页面中的停靠面板。在完成上述配置之后，该展示方法具体可以为：维护映射关系。该映射关系包括组视图与一系列子视图的对应关系。接收针对页面的滑动指令。响应于滑动指令，从当前可见的子视图中查找目标子视图。该目标子视图是指有隶属的组视图的子视图。基于映射关系，确定对应于目标子视图的组视图。将对应于组视图的停靠面板绘制在电子屏幕的顶部。

Description

页面展示方法、装置及设备

技术领域

本说明书一个或多个实施例涉及计算机技术领域，尤其涉及一种页面展示方法、装置及设备。

背景技术

停靠面板是指在页面滑动的过程中会在电子屏幕置顶展示的面板。该停靠面板用于起到对页面内容分类的作用。为保证页面显示的正确性，就要确保当前置顶展示的停靠面板与页面内容分类相符。

因此，如何有效地对停靠面板进行展示就成为要解决的问题。

发明内容

本说明书一个或多个实施例描述了一种页面展示方法、装置及设备，可以确保停靠面板展示的准确性。

第一方面，提供了一种页面展示方法，所述页面由可见列表视图配置得到，所述可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图；所述组视图被配置为所述页面中的停靠面板；所述方法包括：

维护映射关系；所述映射关系包括组视图与一系列子视图的对应关系；

接收针对所述页面的滑动指令；

响应于所述滑动指令，从当前可见的子视图中查找目标子视图；所述目标子视图是指有隶属的组视图的子视图；

基于所述映射关系，确定对应于所述目标子视图的组视图；

将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

第二方面，提供了一种页面展示方法，包括：

监测电子屏幕中停靠面板的点击操作；所述已停靠面板包括至少一个选项区；

根据所述点击操作，确定对应的选项区；

在所述已停靠面板的下方展示该选项区对应的内容信息；

若所述内容信息的高度与所述已停靠面板的高度之和小于所述电子屏幕的高度，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

第三方面，提供了一种页面展示装置，所述页面由可见列表视图配置得到，所述可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图；所述组视图被配置为所述页面中的停靠面板；所述装置包括：

维护单元，用于维护映射关系；所述映射关系包括组视图与一系列子视图的对应关系；

接收单元，用于接收针对所述页面的滑动指令；

查找单元，用于响应于所述接收单元接收的所述滑动指令，从当前可见的子视图中查找目标子视图；所述目标子视图是指有隶属的组视图的子视图；

确定单元，用于基于所述维护单元维护的所述映射关系，确定对应于所述查找单元查找到的所述目标子视图的组视图；

绘制单元，用于将对应于所述确定单元确定的该组视图的停靠面板绘制在电子屏幕的顶部。

第四方面，提供了一种页面展示装置，包括：

监测单元，用于监测电子屏幕中已停靠面板的点击操作；所述已停靠面板包括至少一个选项区；

确定单元，用于根据所述监测单元监测到的所述点击操作，确定对应的选项区；

展示单元，用于在所述已停靠面板的下方展示所述确定单元确定的选项区对应的内容信息；

填充单元，用于若所述展示单元展示的所述内容信息的高度与所述已停靠面板的高度之和小于所述电子屏幕的高度，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

第五方面，提供了一种页面展示设备，所述页面由可见列表视图配置得到，所述可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图；所述组视图被配置为所述页面中的停靠面板；所述设备包括：

存储器；

一个或多个处理器；以及

一个或多个程序，其中所述一个或多个程序存储在所述存储器中，并且被配置成由所述一个或多个处理器执行，所述程序被所述处理器执行时实现以下步骤：

维护映射关系；所述映射关系包括组视图与一系列子视图的对应关系；

接收针对所述页面的滑动指令；

响应于所述滑动指令，从当前可见的子视图中查找目标子视图；所述目标子视图是指有隶属的组视图的子视图；

基于所述映射关系，确定对应于所述目标子视图的组视图；

将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

第六方面，提供了一种页面展示设备，包括：

存储器；

一个或多个处理器；以及

一个或多个程序，其中所述一个或多个程序存储在所述存储器中，并且被配置成由所述一个或多个处理器执行，所述程序被所述处理器执行时实现以下步骤：

监测电子屏幕中停靠面板的点击操作；所述已停靠面板包括至少一个选项区；

根据所述点击操作，确定对应的选项区；

在所述已停靠面板的下方展示该选项区对应的内容信息；

若所述内容信息的高度与所述已停靠面板的高度之和小于所述电子屏幕的高度，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

本说明书一个或多个实施例提供的页面展示方法、装置及设备，在执行页面展示方法之前，先基于可见列表视图配置页面，该可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图。上述组视图被配置为页面中的停靠面板。在完成上述配置之后，该展示方法具体可以为：维护映射关系。该映射关系包括组视图与一系列子视图的对应关系。接收针对页面的滑动指令。响应于滑动指令，从当前可见的子视图中查找目标子视图。该目标子视图是指有隶属的组视图的子视图。基于映射关系，确定对应于目标子视图的组视图。将对应于组视图的停靠面板绘制在电子屏幕的顶部。也即本说明书提供的方案中，通过将组视图配置为停靠面板，之后在页面滑动的过程中，基于组视图与子视图的对应关系在电子屏幕的顶部绘制停靠面板。由此可以确保停靠面板展示的准确性。

附图说明

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

图1为本说明书提供的一种页面示意图；

图2为本说明书一个实施例提供的页面展示方法流程图；

图3为在一个例子中页面停靠面板的控制方法流程图；

图4为本说明书提供的停靠面板的点击操作处理方法流程图；

图5为本说明书另一个实施例提供的页面展示方法流程图；

图6为本说明书提供的另一种页面示意图；

图7为本说明书一个实施例提供的页面展示装置示意图；

图8为本说明书另一个实施例提供的页面展示装置示意图；

图9为本说明书一个实施例提供的页面展示设备示意图；

图10为本说明书另一个实施例提供的页面展示设备示意图。

具体实施方式

下面结合附图，对本说明书提供的方案进行描述。

图1为本说明书提供的一种页面示意图。该页面可以通过电子设备的显示屏幕(简称电子屏幕)进行展示。本说明书所述的电子设备的操作系统可以为安卓系统。可以理解的是，当页面的大小超过电子屏幕时，电子屏幕只能展示页面的部分内容，之后根据接收到的用户的滑动指令，来向用户展示页面的其它部分内容。

需要说明的是，图1中的页面可以包括至少一个子视图，该子视图用于展示页面的内容。对于上述子视图，其可以与停靠面板相对应。在本说明书中，停靠面板与子视图可以是一对多的关系，即一个停靠面板对应多个子视图。具体地，上述停靠面板可以包括至少一个选项区(用于表示页面内容的一种分类)，其中，每个选取区对应至少一个子视图。可以理解的是，与停靠面板中各个选项区对应的子视图均可以理解为是与该停靠面板相对应。

需要说明的是，当电子设备的操作系统为安卓系统时，上述页面可以基于可见列表视图(ExpandableListView)配置得到。ExpandableListView支持分组，也即其可以包含若干组视图。其中，每组视图包括一个组视图(GroupView)和隶属于该组视图的多个子视图(ChildView)。这里的组视图可以被配置为页面中的停靠面板。此外，本说明还可以保存GroupView和ChildView的映射关系。之后，在页面滑动的过程中，通过查找当前可见的ChildView隶属的GroupView，来确定待绘制的停靠面板。

需要说明的是，上述映射关系可以基于映射表来建立，也可以基于标记数组来建立。

图2为本说明书一个实施例提供的页面展示方法流程图。所述方法的执行主体可以为具有处理能力的设备：服务器或者系统或者装置。如图2所示，所述方法具体可以包括：

步骤202，维护映射关系。

该映射关系可以包括组视图与一系列子视图的对应关系。

步骤204，接收针对页面的滑动指令。

如前所述，当页面的大小超过电子屏幕时，电子屏幕只能展示页面的部分内容，之后根据接收到的用户的滑动指令，来向用户展示页面的其它部分内容。

步骤206，响应于滑动指令，从当前可见的子视图中查找目标子视图。

该目标子视图是指有隶属的组视图的子视图。

这里可以分两种情况：

第一种，当电子屏幕中不存在已停靠面板时，可以获取电子屏幕当前可见的子视图中的第一个子视图。根据上述GroupView和ChildView的映射关系，来确定第一个子视图是否有对应的组视图。如果有，则查找到目标子视图，否则未查找到。

第二种，当电子屏幕中存在已停靠面板时，根据上述GroupView和ChildView的映射关系，依次判断电子屏幕当前可见的各个子视图中是否有隶属的组视图。若任一子视图有隶属的组视图，则查找的目标子视图，否则未查找到子视图。

需要说明的是，对于上述第一种情况，若未查找到目标子视图，则不执行任何操作。而对于上述第二种情况，在未查找到目标子视图时，可以将已停靠面板全部移出电子屏幕。由此，可以保证停靠面板与电子屏幕可见的页面部分的内容分类相符。

可以理解的是，对于上述两种情况，在查找到目标子视图时，则执行如下的步骤208和步骤210。

步骤208，基于映射关系，确定对应于目标子视图的组视图。

步骤210，将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

这里也分两种情况进行说明：

对于上述电子屏幕中存在已停靠面板的情况，该绘制过程具体可以为：

步骤a，获取组视图与电子屏幕的顶部之间的距离。

如，可以先确定组视图在电子屏幕的展示位置，之后基于该展示位置，计算组视图与电子屏幕的顶部之间的距离。需要说明的是，这里的电子屏幕的顶部也可以理解为是电子屏幕可见的页面部分的顶部。

步骤b，根据获取的距离以及电子屏幕中已停靠面板的高度，确定已停靠面板的移动距离。

在本说明书的以下描述中，将组视图与电子屏幕的顶部之间的距离表示为距离Y，将已停靠面板的高度表示为高度H。在一种实现方式中，可以根据距离Y与高度H之间的大小关系，来确定已停靠面的移动距离。如，当距离Y大于高度H时，说明组视图距离电子屏幕的顶部还比较远，因此可以不移动已停靠面板，也即已停靠面板的移动距离可以为第一数值，如，0。而当距离Y不大于高度H时，说明组视图对应的停靠面板即将要被置顶展示，因此可以对将已停靠面板慢慢移出电子屏幕。具体地，可以根据高度H与距离Y的差值，来确定已停靠面板的移动距离。

在其它实现方式中，对于距离Y不大于高度H的情况，还可以进一步判断距离Y是否大于阈值(如，0)，如果大于，则将高度H与距离Y的差值作为已停靠面板的移动距离。否则，将高度H作为已停靠面板的移动距离，本说明书对此不作限定。

步骤c，根据确定的移动距离，向电子屏幕的顶部方向移动已停靠面板。

可以理解的是，若已停靠面板的移动距离大于0且小于已停靠面板的高度，则已停靠面板部分会移出电子屏幕，也即已停靠面板部分被隐藏。而若已停靠面板的移动距离大于0且大于等于已停靠面板的高度，则已停靠面板全部移出电子屏幕，也即已停靠面板全部被隐藏。

步骤d，当已停靠面板全部移出电子屏幕时，将对应于组视图的停靠面板绘制在电子屏幕的顶部。

这里在电子屏幕的顶部绘制停靠面板也可以理解为是在电子屏幕可见的页面部分的顶部绘制停靠面板。

由此可以看出，在本说明书提供的实施例中，可以根据组视图距离电子屏幕的顶部的距离，来慢慢移动电子屏幕中的已停靠面板。当已停靠面板全部移出电子屏幕时，将对应于组视图的停靠面板绘制在电子屏幕的顶部，由此实现了多个停靠面板连续置顶展示的效果，从而给用户带来较好的使用体验。

当然，在实际应用中，也可以不用对组视图与电子屏幕的顶部之间的距离进行判读，而可以先将已停靠面板隐藏，之后再绘制该组视图对应的停靠面板。

对于上述电子屏幕中不存在已停靠面板的情况，则直接执行上述绘制操作。关于电子屏幕中存在已停靠面板时停靠面板的绘制步骤，以下将通过一个具体实例来进行说明。

图3为在一个例子中页面停靠面板的控制方法流程图。如图3所示，所述方法可以包括如下步骤：

步骤302，创建可滑动页面。

该可滑动页面可以是基于ExpandableListView配置得到。ExpandableListView支持分组，也即其可以包含若干组视图。其中，每组视图包括一个组视图(GroupView)和隶属于该组视图的多个子视图(ChildView)。这里的组视图可以被配置为页面中的停靠面板。

步骤304，建立GroupView和ChildView的映射关系。

步骤306，接收滑动指令。

步骤308，判断电子屏幕是否存在已停靠面板，如果是，则执行步骤310；否则，执行步骤312。

步骤310，从当前可见的子视图中查找目标子视图，如果查找到，则执行步骤314；否则隐藏已停靠面板并结束。

步骤312，判断电子屏幕当前可见的子视图中的第一个子视图是否有对应的组视图，如果是，则执行步骤314；否则结束。

步骤314，获得组视图与电子屏幕的顶部之间的距离Y以及已停靠面板的高度H。

这里，当无停靠面板时，获取的已停靠面板的高度为0。

步骤316，判断Y是否小于等于H，如果是，则执行步骤318，否则结束。

步骤318，判断Y是否小于等于0，如果是，则执行步骤320；否则，执行步骤322。

步骤320，将已停靠面板隐藏，绘制组视图对应的停靠面板。

步骤322，将已停靠面板向电子屏幕的顶部方向移动H-Y的距离。

以上是对多个停靠面板连续置顶展示的过程的说明。另外，由于停靠面板是绘制在页面中的，为了避免停靠面板的点击操作与页面自身的点击操作冲突，造成的停靠面板点击不生效问题，可以执行以下的处理过程。

具体地，可以监测停靠面板上的点击操作。当监测到点击操作时，分别确定点击操作过程中的按下操作和抬起操作所在的位置。分别根据按下操作和抬起操作所在的位置，从停靠面板中确定出各自对应的选项区。若按下操作对应的选项区与抬起操作对应的选项区相同，则在停靠面板的下方展示该选项区对应的内容信息。

在一种实现方式中，从停靠面板中确定出各自对应的选项区的过程可以为：记录按下操作所在的位置，依次获取停靠面板中的各个选项区的位置。若任意的第一选项区的位置与按下操作所在的位置相匹配，则将第一选项区确定为按下操作对应的选项区。同样的，记录抬起操作所在的位置，依次获取停靠面板中的各个选项区的位置。若任意的第二选项区的位置与抬起操作所在的位置相匹配，则将第二选项区确定为按下操作对应的选项区。

需要说明的是，通过本说明书提供的点击操作的处理方法，可以有效地对页面的点击操作和停靠面板的点击操作进行区分，从而可以很好地对用户的点击操作进行响应，这大大提升了用户体验。

以下将结合流程图来对停靠面板上的点击事件的处理过程进行详细说明。

图4为本说明书提供的停靠面板的点击操作处理方法流程图。如图4所示，所述方法可以包括：

步骤402，监测停靠面板上的点击操作。

步骤404，拦截该点击操作的处理事件。

步骤406，判断点击操作的当前状态是否为按下状态，如果是，则执行步骤408；否则结束。

步骤408，获取点击操作处于按下状态时所在的位置(x1，y1)。

步骤410，递归遍历停靠面板中的各个选项区的位置，找到与(x1，y1)相匹配的选项区。

步骤412，判断是否找到，如果是，则执行步骤414；否则结束。

步骤414，记录为按下选项区。

步骤416，获取点击操作处于抬起状态时所在的位置(x2，y2)。

步骤418，递归遍历停靠面板中的各个选项区的位置，找到与(x2，y2)相匹配的选项区。

步骤420，判断是否找到，如果是，则执行步骤422；否则结束。

步骤422，比较按下选项区与抬起选项区是否相同，如果是，则执行步骤424，否则结束。

步骤424，处理该选项区的点击事件。

即在停靠面板的下方展示该选项区对应的内容信息。

还需要说明的是，在停靠面板的下方展示某选项区对应的内容信息之后，还可以执行如下步骤：获取内容信息的高度。判断内容信息的高度与停靠面板的高度之和是否小于电子屏幕的高度。如果是，则用空白展示区填充内容信息下方的区域，使得电子屏幕被充满。

通过执行如下步骤，可以解决传统技术中，当与停靠面板中某个选项区对应的内容信息比较少，不足以填充整个电子屏幕时，停靠面板会滑动下来(即停靠面板脱离电子屏幕的顶部)，造成视觉上突跳，从而影响用户体验的问题。

图5为本说明书一个实施例提供的页面展示方法流程图。所述方法的执行主体可以为具有处理能力的设备：服务器或者系统或者装置。如图5所示，所述方法具体可以包括：

步骤502，监测电子屏幕中已停靠面板的点击操作。

这里的已停靠面板可以包括至少一个选项区。

步骤504，根据点击操作，确定对应的选项区。

如，可以根据点击操作过程中的按下操作和抬起操作所在的位置，从停靠面板中确定出对应的选项区。

可以理解的是，如果按下操作和抬起操作所在的位置不同，则可以判断当前的点击操作不是停靠面板的点击操作，从而结束当前流程。

步骤506，在已停靠面板的下方展示该选项区对应的内容信息。

步骤508，若内容信息的高度与已停靠面板的高度之和小于电子屏幕的高度，则用空白展示区填充内容信息下方的区域，使得电子屏幕被充满。

可以理解的是，如果电子屏幕中除上述内容信息外，还包括其它信息，如，在电子屏幕的底部还展示其它信息，那么这里可以是判断已有信息的高度与已停靠面板的高度之和小于电子屏幕的高度。这里的已有信息包括：与选取区对应的内容信息以及电子屏幕的底部信息。

图6为本说明书提供的另一种页面示意图。从图6中可以看出，与选项区“研报”对应的内容信息较少，不足以填充整个屏幕。因此，可以在内容信息下方与电子屏幕的底部信息之间填充空白展示区，也即该空白展示区的高度为电子屏幕的高度减去已停靠面板的高度再减去已有信息的高度。

综上，通过本说明书实施例提供的页面展示方法，可以解决通过停靠面板切换信息流时造成的视觉上突然跳动问题，进而可以大大提升用户体验。

与上述页面展示方法对应地，本说明书一个实施例还提供的一种页面展示装置，该页面由可见列表视图配置得到，该可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图。这里的组视图可以被配置为页面中的停靠面板。如图7所示，该装置可以包括：

维护单元702，用于维护映射关系。该映射关系包括组视图与一系列子视图的对应关系。

接收单元704，用于接收针对页面的滑动指令。

查找单元706，用于响应于接收单元704接收的滑动指令，从当前可见的子视图中查找目标子视图。该目标子视图是指有隶属的组视图的子视图。

确定单元708，用于基于维护单元702维护的映射关系，确定对应于查找单元706查找到的目标子视图的组视图。

绘制单元710，用于将对应于确定单元708确定的该组视图的停靠面板绘制在电子屏幕的顶部。

绘制单元710具体可以用于：

获取组视图与电子屏幕的顶部之间的距离。

根据距离以及电子屏幕中已停靠面板的高度，确定已停靠面板的移动距离。

根据确定的移动距离，向电子屏幕的顶部方向移动已停靠面板。

当已停靠面板全部移出电子屏幕时，将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

可选地，绘制单元710还具体可以用于：

比较距离和高度。若距离不大于高度，则将高度与距离的差值作为已停靠面板的移动距离。否则将第一数值作为已停靠面板的移动距离。

可选地，绘制单元710还具体可以用于：

若距离不大于高度，且距离大于阈值，则将高度与距离的差值作为已停靠面板的移动距离。

若距离不大于高度，且距离不大于阈值，则将高度作为已停靠面板的移动距离。

可选地，绘制单元710还具体可以用于：

若移动距离不小于高度，则将已停靠面板全部移出电子屏幕。

若移动距离小于高度，则将已停靠面板向电子屏幕的顶部方向移动上述移动距离，使得已停靠面板部分移出电子屏幕。

可选地，绘制单元710，还用于当电子屏幕中不存在已停靠面板时，若组视图与电子屏幕的顶部之间的距离不大于阈值，则将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

可选地，该装置还可以包括：

监测单元712，用于监测停靠面板上的点击操作。

确定单元708，还用于当监测单元712监测到点击操作时，分别确定点击操作过程中的按下操作和抬起操作所在的位置。

确定单元708，还用于分别根据按下操作和抬起操作所在的位置，从停靠面板中确定出各自对应的选项区。

展示单元714，用于若确定单元708确定按下操作对应的选项区与抬起操作对应的选项区相同，则在停靠面板的下方展示该选项区对应的内容信息。

确定单元708具体可以用于：

记录按下操作所在的位置，依次获取停靠面板中的各个选项区的位置。若任意的第一选项区的位置与按下操作所在的位置相匹配，则将第一选项区确定为按下操作对应的选项区。

记录抬起操作所在的位置，依次获取停靠面板中的各个选项区的位置。若任意的第二选项区的位置与抬起操作所在的位置相匹配，则将第二选项区确定为按下操作对应的选项区。

可选地，该装置还可以包括：

获取单元716，用于获取内容信息的高度。

判断单元718，用于判断获取单元716获取的内容信息的高度与停靠面板的高度之和是否小于电子屏幕的高度。

填充单元720，用于用空白展示区填充内容信息下方的区域，使得电子屏幕被充满。

本说明书上述实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本说明书一个实施例提供的装置的具体工作过程，在此不复赘述。

本说明书一个实施例提供的页面展示装置，维护单元702维护映射关系。该映射关系包括组视图与一系列子视图的对应关系。接收单元704接收针对页面的滑动指令。响应于滑动指令，查找单元706从当前可见的子视图中查找目标子视图。该目标子视图是指有隶属的组视图的子视图。确定单元708基于映射关系，确定对应于目标子视图的组视图。绘制单元710将对应于组视图的停靠面板绘制在电子屏幕的顶部。由此，可以确保停靠面板展示的准确性。

与上述页面展示方法对应地，本说明书一个实施例还提供的一种页面展示装置，如图8所示，该装置可以包括：

监测单元802，用于监测电子屏幕中已停靠面板的点击操作，该已停靠面板包括至少一个选项区。

确定单元804，用于根据监测单元802监测到的点击操作，确定对应的选项区。

展示单元806，用于在已停靠面板的下方展示确定单元804确定的选项区对应的内容信息.

填充单元808，用于若展示单元806展示的内容信息的高度与已停靠面板的高度之和小于电子屏幕的高度，则用空白展示区填充内容信息下方的区域，使得电子屏幕被充满。

本说明书上述实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本说明书一个实施例提供的装置的具体工作过程，在此不复赘述。

本说明书一个实施例提供的页面展示装置，可以解决通过停靠面板切换信息流时造成的视觉上突然跳动问题，进而可以大大提升用户体验。

与上述页面展示方法对应地，本说明书实施例还提供了一种页面展示设备，该页面由可见列表视图配置得到，该可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图。这里的组视图可以被配置为页面中的停靠面板。如图9所示，该设备可以包括：存储器902、一个或多个处理器904以及一个或多个程序。其中，该一个或多个程序存储在存储器902中，并且被配置成由一个或多个处理器904执行，该程序被处理器904执行时实现以下步骤：

维护映射关系。该映射关系包括组视图与一系列子视图的对应关系。

接收针对页面的滑动指令。

响应于滑动指令，从当前可见的子视图中查找目标子视图，该目标子视图是指有隶属的组视图的子视图。

基于映射关系，确定对应于目标子视图的组视图。

将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

本说明书一个实施例提供的页面展示设备，可以确保停靠面板展示的准确性。

与上述页面展示方法对应地，本说明书实施例还提供了一种页面展示设备，如图10所示，该设备可以包括：存储器1002、一个或多个处理器1004以及一个或多个程序。其中，该一个或多个程序存储在存储器1002中，并且被配置成由一个或多个处理器1004执行，该程序被处理器1004执行时实现以下步骤：

监测电子屏幕中已停靠面板的点击操作，该已停靠面板包括至少一个选项区。

根据点击操作，确定对应的选项区。

在已停靠面板的下方展示该选项区对应的内容信息。

若内容信息的高度与已停靠面板的高度之和小于电子屏幕的高度，则用空白展示区填充内容信息下方的区域，使得电子屏幕被充满。

本说明书一个实施例提供的页面展示设备，可以解决通过停靠面板切换信息流时造成的视觉上突然跳动问题，进而可以大大提升用户体验。

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

结合本说明书公开内容所描述的方法或者算法的步骤可以硬件的方式来实现，也可以是由处理器执行软件指令的方式来实现。软件指令可以由相应的软件模块组成，软件模块可以被存放于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、移动硬盘、CD-ROM或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。另外，该ASIC可以位于服务器中。当然，处理器和存储介质也可以作为分立组件存在于服务器中。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。

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

以上所述的具体实施方式，对本说明书的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本说明书的具体实施方式而已，并不用于限定本说明书的保护范围，凡在本说明书的技术方案的基础之上，所做的任何修改、等同替换、改进等，均应包括在本说明书的保护范围之内。

Claims (22)

1.一种页面展示方法，所述页面由可见列表视图配置得到，所述可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图；所述组视图被配置为所述页面中的停靠面板；所述方法包括：

维护映射关系；所述映射关系包括组视图与一系列子视图的对应关系；

接收针对所述页面的滑动指令；

响应于所述滑动指令，从当前可见的子视图中查找目标子视图；所述目标子视图是指有隶属的组视图的子视图；

基于所述映射关系，确定对应于所述目标子视图的组视图；

将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

2.根据权利要求1所述的方法，所述将对应于该组视图的停靠面板绘制在所述电子屏幕的顶部，包括：

获取所述组视图与所述电子屏幕的顶部之间的距离；

根据所述距离以及所述电子屏幕中已停靠面板的高度，确定所述已停靠面板的移动距离；

根据所述移动距离，向所述电子屏幕的顶部方向移动所述已停靠面板；

当所述已停靠面板全部移出所述电子屏幕时，将对应于该组视图的停靠面板绘制在所述电子屏幕的顶部。

3.根据权利要求2所述的方法，所述根据所述距离以及所述电子屏幕中已停靠面板的高度，确定所述已停靠面板的移动距离，包括：

比较所述距离和所述高度；若所述距离不大于所述高度，则将所述高度与所述距离的差值作为所述已停靠面板的移动距离；否则将第一数值作为所述已停靠面板的移动距离。

4.根据权利要求3所述的方法，所述若所述距离不大于所述高度，则将所述高度与所述距离的差值作为所述已停靠面板的移动距离，包括：

若所述距离不大于所述高度，且所述距离大于阈值，则将所述高度与所述距离的差值作为所述已停靠面板的移动距离；

若所述距离不大于所述高度，且所述距离不大于所述阈值，则将所述高度作为所述已停靠面板的移动距离。

5.根据权利要求2所述的方法，所述根据所述移动距离，向所述电子屏幕的顶部方向移动所述已停靠面板，包括：

若所述移动距离不小于所述高度，则将所述已停靠面板全部移出所述电子屏幕；

若所述移动距离小于所述高度，则将所述已停靠面板向所述电子屏幕的顶部方向移动所述移动距离，使得所述已停靠面板部分移出所述电子屏幕。

6.根据权利要求2所述的方法，还包括：

当所述电子屏幕中不存在所述已停靠面板时，若所述组视图与所述电子屏幕的顶部之间的距离不大于阈值，则将对应于该组视图的停靠面板绘制在所述电子屏幕的顶部。

7.根据权利要求1所述的方法，所述停靠面板包括至少一个选项区；在所述将对应于该组视图的停靠面板绘制在所述电子屏幕的顶部后，还包括：

监测所述停靠面板上的点击操作；

当监测到所述点击操作时，分别确定点击操作过程中的按下操作和抬起操作所在的位置；

分别根据所述按下操作和所述抬起操作所在的位置，从所述停靠面板中确定出各自对应的选项区；

若所述按下操作对应的选项区与所述抬起操作对应的选项区相同，则在所述停靠面板的下方展示该选项区对应的内容信息。

8.根据权利要求7所述的方法，所述分别根据所述按下操作和所述抬起操作所在的位置，从所述停靠面板中确定出各自对应的选项区，包括：

记录所述按下操作所在的位置，依次获取所述停靠面板中的各个选项区的位置；若任意的第一选项区的位置与所述按下操作所在的位置相匹配，则将所述第一选项区确定为所述按下操作对应的选项区；

记录所述抬起操作所在的位置，依次获取所述停靠面板中的各个选项区的位置；若任意的第二选项区的位置与所述抬起操作所在的位置相匹配，则将所述第二选项区确定为所述按下操作对应的选项区。

9.根据权利要求7所述的方法，还包括：

获取所述内容信息的高度；

判断所述内容信息的高度与所述停靠面板的高度之和是否小于所述电子屏幕的高度；

如果是，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

10.一种页面展示方法，包括：

监测电子屏幕中停靠面板的点击操作；所述已停靠面板包括至少一个选项区；

根据所述点击操作，确定对应的选项区；

在所述已停靠面板的下方展示该选项区对应的内容信息；

若所述内容信息的高度与所述已停靠面板的高度之和小于所述电子屏幕的高度，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

11.一种页面展示装置，所述页面由可见列表视图配置得到，所述可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图；所述组视图被配置为所述页面中的停靠面板；所述装置包括：

维护单元，用于维护映射关系；所述映射关系包括组视图与一系列子视图的对应关系；

接收单元，用于接收针对所述页面的滑动指令；

查找单元，用于响应于所述接收单元接收的所述滑动指令，从当前可见的子视图中查找目标子视图；所述目标子视图是指有隶属的组视图的子视图；

确定单元，用于基于所述维护单元维护的所述映射关系，确定对应于所述查找单元查找到的所述目标子视图的组视图；

绘制单元，用于将对应于所述确定单元确定的该组视图的停靠面板绘制在电子屏幕的顶部。

12.根据权利要求11所述的装置，所述绘制单元具体用于：

获取所述组视图与所述电子屏幕的顶部之间的距离；

根据所述距离以及所述电子屏幕中已停靠面板的高度，确定所述已停靠面板的移动距离；

根据所述移动距离，向所述电子屏幕的顶部方向移动所述已停靠面板；

当所述已停靠面板全部移出所述电子屏幕时，将对应于该组视图的停靠面板绘制在所述电子屏幕的顶部。

13.根据权利要求12所述的装置，所述绘制单元还具体用于：

比较所述距离和所述高度；若所述距离不大于所述高度，则将所述高度与所述距离的差值作为所述已停靠面板的移动距离；否则将第一数值作为所述已停靠面板的移动距离。

14.根据权利要求13所述的装置，所述绘制单元还具体用于：

若所述距离不大于所述高度，且所述距离大于阈值，则将所述高度与所述距离的差值作为所述已停靠面板的移动距离；

若所述距离不大于所述高度，且所述距离不大于所述阈值，则将所述高度作为所述已停靠面板的移动距离。

15.根据权利要求12所述的装置，所述绘制单元还具体用于：

若所述移动距离不小于所述高度，则将所述已停靠面板全部移出所述电子屏幕；

若所述移动距离小于所述高度，则将所述已停靠面板向所述电子屏幕的顶部方向移动所述移动距离，使得所述已停靠面板部分移出所述电子屏幕。

16.根据权利要求12所述的装置，所述绘制单元，还用于当所述电子屏幕中不存在所述已停靠面板时，若所述组视图与所述电子屏幕的顶部之间的距离不大于阈值，则将对应于该组视图的停靠面板绘制在所述电子屏幕的顶部。

17.根据权利要求11所述的装置，所述停靠面板包括至少一个选项区；还包括：

监测单元，用于监测所述停靠面板上的点击操作；

所述确定单元，还用于当所述监测单元监测到所述点击操作时，分别确定点击操作过程中的按下操作和抬起操作所在的位置；

所述确定单元，还用于分别根据所述按下操作和所述抬起操作所在的位置，从所述停靠面板中确定出各自对应的选项区；

展示单元，用于若所述确定单元确定所述按下操作对应的选项区与所述抬起操作对应的选项区相同，则在所述停靠面板的下方展示该选项区对应的内容信息。

18.根据权利要求17所述的装置，所述确定单元具体用于：

记录所述按下操作所在的位置，依次获取所述停靠面板中的各个选项区的位置；若任意的第一选项区的位置与所述按下操作所在的位置相匹配，则将所述第一选项区确定为所述按下操作对应的选项区；

记录所述抬起操作所在的位置，依次获取所述停靠面板中的各个选项区的位置；若任意的第二选项区的位置与所述抬起操作所在的位置相匹配，则将所述第二选项区确定为所述按下操作对应的选项区。

19.根据权利要求17所述的装置，还包括：

获取单元，用于获取所述内容信息的高度；

判断单元，用于判断所述获取单元获取的所述内容信息的高度与所述停靠面板的高度之和是否小于所述电子屏幕的高度；

填充单元，用于用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

20.一种页面展示装置，包括：

监测单元，用于监测电子屏幕中已停靠面板的点击操作；所述已停靠面板包括至少一个选项区；

确定单元，用于根据所述监测单元监测到的所述点击操作，确定对应的选项区；

展示单元，用于在所述已停靠面板的下方展示所述确定单元确定的选项区对应的内容信息；

填充单元，用于若所述展示单元展示的所述内容信息的高度与所述已停靠面板的高度之和小于所述电子屏幕的高度，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。

21.一种页面展示设备，所述页面由可见列表视图配置得到，所述可见列表视图包含若干组视图，其中，每组视图包括一个组视图和隶属于该组视图的多个子视图；所述组视图被配置为所述页面中的停靠面板；所述设备包括：

存储器；

一个或多个处理器；以及

一个或多个程序，其中所述一个或多个程序存储在所述存储器中，并且被配置成由所述一个或多个处理器执行，所述程序被所述处理器执行时实现以下步骤：

维护映射关系；所述映射关系包括组视图与一系列子视图的对应关系；

接收针对所述页面的滑动指令；

响应于所述滑动指令，从当前可见的子视图中查找目标子视图；所述目标子视图是指有隶属的组视图的子视图；

基于所述映射关系，确定对应于所述目标子视图的组视图；

将对应于该组视图的停靠面板绘制在电子屏幕的顶部。

22.一种页面展示设备，包括：

存储器；

一个或多个处理器；以及

一个或多个程序，其中所述一个或多个程序存储在所述存储器中，并且被配置成由所述一个或多个处理器执行，所述程序被所述处理器执行时实现以下步骤：

监测电子屏幕中停靠面板的点击操作；所述已停靠面板包括至少一个选项区；

根据所述点击操作，确定对应的选项区；

在所述已停靠面板的下方展示该选项区对应的内容信息；

若所述内容信息的高度与所述已停靠面板的高度之和小于所述电子屏幕的高度，则用空白展示区填充所述内容信息下方的区域，使得所述电子屏幕被充满。