CN107807764B - 一种页面展示方法及客户端 - Google Patents

Abstract

本申请实施方式公开了一种页面展示方法及客户端，其中，所述方法包括：向服务器发送指向目标页面的资源获取请求；接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息；展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表；当所述主列表滚动时，所述第一子列表和所述第二子列表与所述主列表保持同步滚动。本申请提供的技术方案，能够解决顶部视图和纵向列表始终共同占用终端设备的屏幕的问题。

Description

一种页面展示方法及客户端

技术领域

本申请涉及计算机技术领域，特别涉及一种页面展示方法及客户端。

背景技术

当前，在终端设备中通常需要展示各种各样的表单(table)。图1为当前常见的一种表单的示意图。如图1所示，该表单可以包括顶部视图和纵向列表。其中，所述顶部视图可以展示该表单的主题内容。例如，如果该表单为展示通讯录中人员名称的表单，所述顶部视图中便可以展示“通讯录”的字样。所述纵向列表可以展示该表单的详细内容。例如，该纵向列表中可以展示通讯录中各个人员的名称。其中，当纵向列表中的内容过多，导致终端设备的屏幕无法完全展示时，该纵向列表可以进行上下滑动，从而可以在终端设备的屏幕中展示纵向列表中的不同内容。

发明内容

上述的现有技术的表单中，顶部视图的位置通常是固定在屏幕的指定位置处，其一般不会随着纵向列表的滑动而改变位置。一方面，为了在终端设备的屏幕上更多地展示纵向列表中的内容，通常会尽可能地压缩顶部视图的大小。然而，如果顶部视图中需要展示的内容较多，而顶部视图所占的区域又较小，那么顶部视图则无法完整地展示相应的内容。这样，用户则无法从顶部视图中获取到完整的信息。另一方面，如果为了使得顶部视图能够显示完整的内容，那么顶底视图则会占用较大的区域。这样，纵向列表所占的区域就会相应减少，用户需要频繁地滑动纵向列表，才能查看到纵向列表中不同的内容。

由上可见，现有技术中对于表单的展示方法，无法解决顶部视图和纵向列表始终共同占用终端设备的屏幕的问题，从而给用户带来不好的操作体验。

本申请实施方式的目的是提供一种页面展示方法及客户端，能够解决顶部视图和纵向列表始终共同占用终端设备的屏幕的问题。

为实现上述目的，本申请实施方式提供一种页面展示方法，所述方法包括：向服务器发送指向目标页面的资源获取请求；接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息；展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表；当所述主列表滚动时，所述第一子列表和所述第二子列表与所述主列表保持同步滚动。

为实现上述目的，本申请实施方式还提供一种客户端，所述客户端包括网络通信端口、存储器、显示器和处理器，其中：所述网络通信端口，用于向服务器发送指向目标页面的资源获取请求，并接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息；所述存储器，用于存储所述主题标识和所述详情信息；所述显示器，用于展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表；所述处理器，用于当所述主列表滚动时，控制所述第一子列表和所述第二子列表与所述主列表保持同步滚动。

以上可见，本申请提供的技术方案，展示的目标页面中可以包括主列表，该主列表中可以包括多个子列表，所述多个子列表可以包括用于展示主题标识的第一子列表以及用于展示详情信息的第二子列表。其中，主列表可以响应于用户施加的操作指令进行滚动，以向用户展示不同的内容。在主列表滚动时，第一子列表和第二子列表可以与所述主列表进行同步滚动。随着主列表的滚动，显示有主题标识的顶部视图可以逐渐从当前界面中消失，当前界面中从而可以完全展示第二子列表中的详情信息。这样，如果顶部视图所占的显示区域较大，通过主列表滚动的方式，一方面可以查看到顶部视图的完整内容，另一方面还可以将顶部视图从当前界面中移出，使得具体的详情信息能够填充整个当前界面，从而解决了顶部视图和纵向列表始终共同占用终端设备的屏幕的问题。

附图说明

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

图1为本申请实施方式中主列表的结构示意图；

图2为本申请实施方式中主列表内容偏移量的示意图；

图3为本申请实施方式中子列表的划分示意图；

图4为本申请实施方式中多个第二子列表的第一示意图；

图5为本申请实施方式中多个第二子列表的第二示意图；

图6为本申请实施方式中选择控件的示意图；

图7为本申请实施方式中选择控件的悬停示意图；

图8为本申请实施方式中客户端的结构示意图；

图9为本申请实施方式中页面展示方法的流程图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施方式中的附图，对本申请实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式仅仅是本申请一部分实施方式，而不是全部的实施方式。基于本申请中的实施方式，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施方式，都应当属于本申请保护的范围。

本申请实施方式提供一种页面展示方法，所述方法可以应用于客户端中，所述客户端可以是具备图像显示功能的电子设备。具体地，所述客户端例如可以是台式电脑、平板电脑、笔记本电脑、智能手机、数字助理、智能可穿戴设备、导购终端、智能电视机等。或者，所述客户端也可以为能够运行于上述电子设备中的软件。例如，所述客户端可以是在智能终端中运行的应用或者智能终端的操作系统。

请参阅图9，所述页面展示方法可以包括以下步骤。

S1：向服务器发送指向目标页面的资源获取请求。

在本实施方式中，用户可以在客户端中点击目标页面的链接，从而向所述目标页面的服务器发起指向所述目标页面的资源获取请求。所述资源获取请求中可以携带所述目标页面的标识，还可以携带所述客户端的IP地址和所述服务器的IP地址。这样，所述资源获取请求便可以从所述客户端的IP地址处发送至所述服务器所在的IP地址处。

当然，在实际应用场景中，客户端中可能之前已经加载过所述目标页面，所述目标页面的资源可能存储于本地缓存中。因此，在发送资源获取请求之前，所述客户端可以从本地缓存中读取与目标页面相关联的主题标识和详情信息，若在所述本地缓存中不存在所述主题标识和所述详情信息，才向服务器发送指向所述目标页面的资源获取请求。

S3：接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息。

在本实施方式中，服务器在接收到所述资源获取请求后，可以提取其中的目标页面的标识，从而可以获知所述客户端当前需要加载的是哪个页面。在所述服务器中，页面中展示的资源可以与页面的标识进行关联存储。这样，服务器便可以基于提取出的目标页面的标识，从数据库中获取到该目标页面的标识相关联的资源。

在本实施方式中，在所述目标页面中展示的资源可以包括主题标识和详情信息。其中，主题标识可以是所述目标页面的介绍信息。例如，所述目标页面展示的是电影评分，那么所述主题标识便可以是“电影评分”。所述主题标识可以显示于顶部视图中。所述详情信息可以是所述目标页面中展示的具体内容。例如，所述详情信息可以是各个电影的简介以及相应的评分。

在本实施方式中，服务器在获取到所述目标页面的主题标识和详情信息后，便可以向客户端反馈所述主题标识和详情信息。客户端便可以接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息。

S5：展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表；当所述主列表滚动时，所述第一子列表和所述第二子列表与所述主列表保持同步滚动。

在本申请中，终端设备可以展示所述目标页面的主列表，所述主列表中可以包括多个子列表，所述多个子列表中可以包括用于展示所述主题标识的第一子列表以及用于展示详情信息的第二子列表。

具体地，在一个实施方式中，所述目标页面可以显示于终端设备的屏幕上。请参阅图1，所述目标页面的主列表中可以嵌套用于展示不同内容的多个子列表。具体地，所述多个子列表中可以包括用于展示主题标识的第一子列表以及用于展示详情信息的第二子列表。其中，所述主题标识可以表征所述目标页面的介绍信息。例如，所述目标页面展示的是电影评分，那么所述主题标识便可以是“电影评分”的字样。所述详情信息可以是所述目标页面中展示的具体内容。例如，所述详情信息可以是各个电影的简介以及相应的评分。

在本实施方式中，所述主列表可以响应于用户施加的拖动指令进行滚动。所述拖动指令可以是用户的手指施加于触摸屏上的指令，也可以是用户借助于鼠标、键盘、触控笔等外部设备施加于终端设备上的指令。

需要说明的是，在一个实施方式中，所述多个子列表中还可以包括用于展示底部视图的第三子列表。所述底部视图可以展示所述目标页面的备注信息。在实际应用场景中，所述第一子列表、所述第二子列表以及所述第三子列表可以依次相连，并且当所述主列表滚动时，所述第一子列表、所述第二子列表以及所述第三子列表可以与所述主列表保持同步滚动。下面以纵向滚动为例阐述本申请的技术方案。

在本实施方式中，当所述主列表响应于所述拖动指令进行滚动时，所述第一子列表和所述第二子列表可以与所述主列表保持同步滚动。具体地，所述拖动指令可以仅被主列表响应，而不会被子列表响应。这样可以避免主列表和子列表同时响应于所述拖动指令而造成的显示画面分离和卡顿的现象。

在本实施方式中，在主列表中展示的内容可以通过主列表内容偏移量ContentOffset来决定。所述主列表内容偏移量可以是具体的数值，所述主列表内容偏移量可以在主列表上下滚动时，由所述主列表的指定函数返回。例如，所述指定函数可以是ScrollViewDidScroll函数。当主列表滚动后引起主列表内容偏移量发生改变时，ScrollViewDidScroll函数便会返回当前的主列表内容偏移量。所述当前的主列表内容偏移量可以指向当前界面中显示的主列表中第一行的信息。请参阅图2，主列表中各行的信息均可以与主列表内容偏移量相对应，假设主列表中共计100行，那么主列表内容偏移量的取值便可以是0至99。其中，取值为0的主列表内容偏移量可以指向主列表中的第1行的信息，取值为99的主列表内容偏移量可以指向主列表中的第100行的信息。在图2中，当主列表滚动之后，假设在终端设备的当前界面中展示的第一行的信息是主列表中第10行的信息，那么此时所述主列表内容偏移量的取值可以是9。

在本实施方式中，主列表中的子列表可以具备各自的区域，子列表所占的区域也可以通过主列表内容偏移量来表示。例如，所述第一子列表在主列表中占据了第1行至第10行的区域，那么所述第一子列表对应的主列表内容偏移量便可以是0至9。此外，子列表也可以具备自身的子列表内容偏移量，所述子列表内容偏移量是针对子列表而言的。例如，所述第一子列表中共展示10行信息，那么所述第一子列表的子列表内容偏移量的取值便可以是从0至10。当主列表响应于拖动指令进行滚动后，可以确定所述主列表滚动后对应的主列表内容偏移量。具体地，在所述主列表滚动之后，可以读取ScrollViewDidScroll函数返回的主列表内容偏移量。这样，基于所述主列表内容偏移量，可以确定在当前界面中展示的子列表。具体地，子列表的展示区域可以与主列表内容偏移量具备对应关系。例如，第一子列表在主列表中占据了第1行至第10行的区域，那么所述第一子列表对应的主列表内容偏移量便可以是0至9。也就是说，在这个例子中，第一子列表与取值范围为0至9的主列表内容偏移量具备对应关系。在实际应用场景中，各个子列表可以根据自身在主列表中所占的区域，确定出子列表与主列表内容偏移量的取值范围之间的对应关系。根据这种对应关系以及当前的主列表内容偏移值，从而可以确定在当前界面中展示的子列表。例如，请参阅图3，第一子列表对应的主列表内容偏移值的取值范围为0至9，第二子列表对应的主列表内容偏移值的取值范围为10至30，假设终端设备的屏幕可以展示20行的信息，并且假设当前的主列表内容偏移量为5，那么从而可以知晓在当前界面中，可以展示第一子列表的部分内容以及第二子列表的部分内容。在图3中，虚线表示的是屏幕的显示范围。

在本实施方式中，当确定出在当前界面中展示的子列表后，可以根据所述主列表内容偏移量，设置各个子列表对应的子列表内容偏移量。具体地，请参阅图3，第一子列表对应的主列表内容偏移值的取值范围为0至9，而当前的主列表内容偏移值为5，因此第一子列表对应的子列表内容偏移值也为5，这样，第一子列表在当前界面中展示的第一行的信息便可以是所述第一子列表中第六行的信息。由于第二子列表对应的主列表内容偏移值的取值范围为10至30，因此所述第二子列表中的第一行的信息可以在当前界面中展示，这样，所述第二子列表对应的子列表内容偏移值便可以是0。由上可见，通过将当前的主列表内容偏移值与各个子列表所对应的主列表内容偏移值的取值范围进行比对，从而可以设置各个子列表对应的子列表内容偏移值。这样，子列表便可以展示与当前自身的子列表内容偏移量相适配的内容。

在一个实施方式中，子列表在展示每一行的内容时，可以建立每一行的展示控件，并在所述展示控件中填充待展示的内容。这样，在子列表中可以包括多个展示控件。在实际应用中，所述展示控件可以是tableview(表单视图)中的cell(行区域)，所述cell对于用户而言可以是不可见的，用户通常只会看到cell中填充的展示内容。在子列表需要展示内容时，便会在子列表内建立相应的cell。在本实施方式中，为了减少建立展示控件的资源消耗，可以通过展示控件重用的方式来展示子列表中的内容。具体地，随着主列表的滚动，子列表中的一部分内容会从当前界面中移出，同时也会有一部分内容进入当前界面中。当某一行的内容从当前界面中移出时，该行的内容所对应的展示控件也会从当前界面中移出。在本实施方式中，在所述主列表滚动时，可以判断是否有展示控件从当前界面中移出。若存在从当前界面中移出的展示控件，那么可以将所述移出的展示控件加入控件池。所述控件池可以是用于容纳展示控件的资源集合，所述控件池可以位于终端设备的内存中。在实际应用场景中，各个创建的展示控件可以具备唯一的控件标识。在将展示控件加入控件池时，可以在控件池中将展示控件及其控件标识进行关联存储。这样，当需要从控件池中获取目标展示控件时，可以通过读取目标展示控件的控件标识，以获取所述目标展示控件。将移出当前界面的展示控件加入控件池的目的在于，当在所述主列表中需要展示新的内容时，可以从所述控件池中获取展示控件，并在当前页面中通过获取的所述展示控件展示所述新的内容。这样便可以将移出当前界面的展示控件重新放置于当前界面中，用于展示新增加的内容，而不用针对新增加的内容重新建立新的展示控件，从而可以减少创建展示控件的资源消耗，进而能够保证界面的流畅。

在一个实施方式中，所述主列表中可以包括至少两个第二子列表，其中，所述至少两个第二子列表的排列方向与所述主列表的滚动方向相垂直。例如，所述主列表按照上下的方向纵向滚动，那么所述至少两个第二子列表就可以按照左右的方向并行排列。不同的第二子列表之间可以相互切换。具体地，用户可以向终端设备施加切换指令，从而可以从一个第二子列表切换至另一个第二子列表。所述切换指令例如可以是用户的手指施加于触摸屏上的左后滑动指令，也可以是用户借助于鼠标、键盘、触控笔等外部设备施加于终端设备上的点击或者滑动指令。在本实施方式中，考虑到不同第二子列表中展示的内容也通常不同，如果在主列表滚动时，所有的第二子列表中的内容都相应改变，那么有可能在从当前第二子列表切换至目标第二子列表时，目标第二子列表中没有内容可以展示。具体原因请参阅图4，假设主列表中有两个第二子列表，当前主列表中展示的为当前第二子列表，另一个第二子列表为目标第二子列表。其中，当前第二子列表中展示的内容较多，目标第二子列表中展示的内容较少。图4中的虚线框为终端设备的显示屏，在该虚线框内的内容才能被用户查看到。此时，如果两个第二子列表中的内容都随着主列表滚动而滚动，那么在滚动至当前第二子列表的下方时，右侧的目标第二子列表已经没有内容可以展示了，此时如果从当前第二子列表切换至目标第二子列表，用户则只能看到空白的内容，这样将会带来很不好的用户体验。

为了解决上述的问题，可以在当前第二子列表跟随所述主列表滚动时，保持其它第二子列表中展示的内容不变。请参阅图5，也就是说，无论当前第二子列表滚动至何种位置，其它第二子列表中展示的内容都不会改变。然而，由于其它第二子列表也属于主列表的一部分，因此在主列表滚动时，其它第二子列表的子列表内容偏移量还是需要与所述当前第二子列表的子列表内容偏移量保持一致。例如，当前第二子列表滚动至子列表内容偏移量为1000的位置后，其它第二子列表对应的子列表内容偏移量同样也为1000。按照这样的处理方式，在从当前第二子列表切换至目标第二子列表时，会存在展示内容与子列表内容偏移量不一致的情况。由于目标第二子列表中的内容没有发生改变，因此在切换至目标第二子列表后，该第二子列表中实际展示的其实是子列表偏移量为0的内容，但是由于主列表发生了滚动，因此所述目标第二子列表当前的子列表偏移量实际为1000，这样，展示内容与子列表偏移量便存在不一致的情况。为了解决这个矛盾，在本实施方式中，可以记录其它第二子列表自身的初始子列表内容偏移量。所述初始子列表内容偏移量可以是其它第二子列表中第一行内容所对应的子列表内容偏移量，例如该初始子列表内容偏移量可以为0；此外，所述初始子列表内容偏移量还可以是其它第二子列表在发生切换之间所对应的子列表内容偏移量。例如，用户在浏览某个第二子列表中的内容时，使得该第二子列表滚动至子列表内容偏移量为150的地方，然后用户从该第二子列表切换至了另一个第二子列表，此时，用户之前浏览的该第二子列表的初始子列表内容偏移量便可以设置为150。这样，各个第二子列表均可以具备自身的初始子列表内容偏移量。相应地，在从所述当前第二子列表切换至所述目标第二子列表时，可以在当前界面中展示所述目标第二子列表中的内容，该内容便可以是上述保持不变的内容，同时为了消除展示内容与子列表内容偏移量不对应的问题，可以将所述目标第二子列表的子列表内容偏移量重置为所述目标第二子列表对应的初始子列表内容偏移量。也就是说，可以将当前值为1000的子列表内容偏移量重置为0，从而使得目标第二子列表中展示的内容与重置后的子列表内容偏移量相一致。

在本实施方式中，在重置了目标第二子列表的子列表内容偏移量之后，可以进一步地调整所述主列表的主列表内容偏移量，以使得调整后的主列表内容偏移量与所述目标第二子列表的初始子列表内容偏移量相匹配。根据前述实施方式可知，第二子列表所占的区域可以对应主列表内容偏移量的取值范围。这样，在重置得到第二子列表的子列表内容偏移量之后，可以倒推出主列表当前应当对应的主列表内容偏移量。例如，某个第二子列表对应的主列表内容偏移量的取值范围为10至30，而该第二子列表当前重置后的子列表内容偏移量为0，那么此时所述主列表内容偏移量便可以设置为10，以与该第二子列表的子列表内容偏移量保持一致。

在一个实施方式中，为了方便地在多个第二子列表中进行切换，可以在所述主列表中设置与所述至少两个第二子列表相关联的选择控件，其中，所述选择控件的数量与所述第二子列表的数量一致。具体地，所述选择控件可以是iOS系统中的UISegmentedControl控件。请参阅图6，选择控件上可以标注对应的第二子列表的标签。如图6所示，所述主列表中可以包括用于展示游戏内容的第二子列表(简称为游戏子列表)以及用于展示影视内容的第二子列表(简称为影视子列表)。同时，所述主列表中可以包括两个选择控件，所述两个选择控件上分别标注了游戏和影视。其中，标注了游戏的选择控件用于选定游戏子列表，标注了影视的选择控件用于选定影视子列表。在本实施方式中，当从第一选择控件切换至第二选择控件时，在所述主列表中展示的第二子列表由与所述第一选择控件相关联的第二子列表切换至与所述第二选择控件相关联的第二子列表。例如，当前在主列表中展示的是游戏子列表，那么当用户点击标注了影视的选择控件时，主列表中的游戏子列表可以切换至影视子列表。图6中的虚线表示当前界面的显示区域。

如图6所示，在本实施方式中，所述选择控件在主列表中的初始位置可以位于所述第一子列表和所述第二子列表之间。所述选择控件可以设置为悬停于当前界面中。具体地，选择控件悬停于当前界面中可以指在所述主列表滚动时，若在当前界面中显示所述选择控件的初始位置，所述选择控件与所述第一子列表以及所述第二子列表同步滚动。例如在图6中，在主列表滚动时，所述选择控件的初始位置没有移出当前界面，那么在当前界面中显示了所述选择控件的初始位置。在这种情况下，选择控件可以与第一子列表以及第二子列表视为一个整体，随着主列表的滚动而滚动。但是，随着主列表的滚动，所述选择控件的初始位置可能会移出当前界面。例如在图7中，选择控件的初始位置便在当前界面之外，此时，在当前界面中无法显示所述选择控件的初始位置。在这种情况下，所述选择控件可以悬停于当前界面的顶端或者底端。也就是说，选择控件可以不随着主列表的滚动而移出当前界面，而是始终显示在主列表中，从而可以让用户方便地在各个第二子列表中进行切换。例如在图7中，选择控件的初始位置已经移出了当前界面，但选择控件仍可以悬停于当前界面的顶端。

在一个实施方式中，所述第二子列表的尺寸可以根据与所述详情信息进行调整。具体地，在展示所述目标页面的主列表之前，客户端可以获取在所述目标页面中待展示的详情信息。获取所述详情信息的方式包括从客户端本地读取所述详情信息或者通过互联网从其它终端设备中读取所述详情信息。在获取了所述详情信息之后，客户端可以根据每行展示的内容数量，来确定所述详情信息需要占据的行数。这样，所述行数乘以行高便可以得到所述第二子列表的高度。根据计算得到的高度可以动态地调节所述第二子列表的高度，这样，调节之后的第二子列表的尺寸便可以与所述详情信息相适配。其中，所述适配可以指调节之后的第二子列表的区域能够刚好容纳所述详情信息。

请参阅图8，本申请还提供一种客户端，所述客户端包括网络通信端口、存储器、显示器和处理器。

其中，所述网络通信端口，用于向服务器发送指向目标页面的资源获取请求，并接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息。

所述存储器，用于存储所述主题标识和所述详情信息。

所述显示器，用于展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表。

所述处理器，用于当所述主列表滚动时，控制所述第一子列表和所述第二子列表与所述主列表保持同步滚动。

在一个实施方式中，所述多个子列表中还包括用于展示底部视图的第三子列表；相应地，所述处理器还用于当所述主列表滚动时，控制所述第一子列表、所述第二子列表以及所述第三子列表与所述主列表保持同步滚动。

在一个实施方式中，所述主列表中包括至少两个第二子列表，其中，所述至少两个第二子列表的排列方向与所述主列表的滚动方向相垂直；

相应地，所述处理器还用于在当前第二子列表跟随所述主列表滚动时，保持其它第二子列表中展示的内容不变，并使得其它第二子列表的子列表内容偏移量与所述当前第二子列表的子列表内容偏移量保持一致。

在一个实施方式中，其它第二子列表具备自身的初始子列表内容偏移量；相应地，所述处理器还用于在从所述当前第二子列表切换至所述目标第二子列表时，在当前界面中展示所述目标第二子列表中的内容，并将所述目标第二子列表的子列表内容偏移量重置为所述目标第二子列表对应的初始子列表内容偏移量。

在一个实施方式中，所述处理器还用于调整所述主列表的主列表内容偏移量，以使得调整后的主列表内容偏移量与所述目标第二子列表的初始子列表内容偏移量相匹配。

在本实施方式中，所述网络通信端口可以是与不同的通信协议进行绑定，从而可以发送或接收不同数据的虚拟端口。例如，所述网络通信端口可以是负责进行web数据通信的80号端口，也可以是负责进行FTP数据通信的21号端口，还可以是负责进行邮件数据通信的25号端口。此外，所述网络通信端口还可以是实体的通信接口或者通信芯片。例如，其可以为无线移动网络通信芯片，如GSM、CDMA等；其还可以为Wifi芯片；其还可以为蓝牙芯片。

在本实施方式中，所述存储器包括但不限于随机存取存储器(Random AccessMemory,RAM)、只读存储器(Read-Only Memory,ROM)、缓存(Cache)、硬盘(Hard DiskDrive,HDD)或者存储卡(Memory Card)。

在本实施方式中，所述显示器可以是将一定的电子文件通过特定的传输设备显示到屏幕上再反射到人眼的显示工具。所述显示器可以包括液晶LCD显示屏、阴极射线管CRT显示屏、发光二极管LED显示屏等。

在本实施方式中，所述处理器可以按任何适当的方式实现。例如，所述处理器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式等等。

本说明书实施方式提供的客户端，其网络通信端口、存储器、显示器和处理器实现的具体功能，可以与本说明书中的前述实施方式相对照解释，并能够达到前述实施方式的技术效果。

以上可见，本申请提供的技术方案，展示的目标页面中可以包括主列表，该主列表中可以包括多个子列表，所述多个子列表可以包括用于展示主题标识的第一子列表以及用于展示详情信息的第二子列表。其中，主列表可以响应于用户施加的操作指令进行滚动，以向用户展示不同的内容。在主列表滚动时，第一子列表和第二子列表可以与所述主列表进行同步滚动。随着主列表的滚动，显示有主题标识的顶部视图可以逐渐从当前界面中消失，当前界面中从而可以完全展示第二子列表中的详情信息。这样，如果顶部视图所占的显示区域较大，通过主列表滚动的方式，一方面可以查看到顶部视图的完整内容，另一方面还可以将顶部视图从当前界面中移出，使得具体的详情信息能够填充整个当前界面，从而解决了顶部视图和纵向列表始终共同占用终端设备的屏幕的问题。

需要说明的是，上述实施方式中主列表是以纵向滚动为例进行阐述，这只是为了便于阐述技术方案而已，并不意味着本申请的技术方案仅限于纵向滚动的场景。事实上，本申请的技术方案同样适用于横向滚动的场景。请参阅图9，所述主列表可以沿着左右方向滚动，多个第二子列表则可以按照上下方向进行排列，并且在用户施加上下方向的滑动指令时，可以从一个第二子列表切换至另一个第二子列表。在实际应用场景中，所述主列表可以通过ColletctionView来实现。具体地，通过将ColletctionView的方向属性设置为横向滚动方向(UICollectionViewScrollDirectionHorizontal)，从而可以使得主列表在水平方向进行滚动。在该横向滚动的场景中，主列表的滚动以及第二子列表的切换均可以参照上述的纵向滚动的场景，这里便不再赘述。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片2。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog2。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现客户端以外，完全可以通过将方法步骤进行逻辑编程来使得客户端以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种客户端可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施方式或者实施方式的某些部分所述的方法。

本说明书中的各个实施方式均采用递进的方式描述，各个实施方式之间相同相似的部分互相参见即可，每个实施方式重点说明的都是与其他实施方式的不同之处。尤其，针对客户端的实施方式来说，均可以参照前述方法的实施方式的介绍对照解释。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

虽然通过实施方式描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。

Claims (12)

1.一种页面展示方法，其特征在于，所述方法包括：

向服务器发送指向目标页面的资源获取请求；

接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息；

展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表；当所述主列表滚动时，所述第一子列表和所述第二子列表与所述主列表保持同步滚动；其中，所述主列表中包括至少两个第二子列表，不同的第二子列表之间可以相互切换；其中，所述至少两个第二子列表的排列方向与所述主列表的滚动方向相垂直；相应地，在当前第二子列表跟随所述主列表滚动时，保持其它第二子列表中展示的内容不变，并使得其它第二子列表的子列表内容偏移量与所述当前第二子列表的子列表内容偏移量保持一致；其它第二子列表具备自身的初始子列表内容偏移量；相应地，所述方法还包括：

在从所述当前第二子列表切换至目标第二子列表时，在当前界面中展示所述目标第二子列表中的内容，并将所述目标第二子列表的子列表内容偏移量重置为所述目标第二子列表对应的初始子列表内容偏移量。

2.根据权利要求1所述的方法，其特征在于，所述多个子列表中还包括用于展示底部视图的第三子列表，其中，当所述主列表滚动时，所述第一子列表、所述第二子列表以及所述第三子列表与所述主列表保持同步滚动。

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

确定所述主列表滚动后对应的主列表内容偏移量，并基于所述主列表内容偏移量，确定在当前界面中展示的目标子列表；

根据所述主列表内容偏移量，设置所述目标子列表对应的子列表内容偏移量，以使得所述目标子列表展示与所述子列表内容偏移量相适配的内容。

4.根据权利要求1或2所述的方法，其特征在于，所述主列表的子列表中包括多个展示控件，所述展示控件用于填充待展示的内容；相应地，所述方法还包括：

在所述主列表滚动时，若存在从当前界面中移出的展示控件，将所述移出的展示控件加入控件池；其中，所述展示控件具备控件标识；

当在所述主列表中需要展示新的内容时，从所述控件池中通过读取目标展示控件的控件标识，以获取所述目标展示控件，并在当前页面中通过所述目标展示控件展示所述新的内容。

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

调整所述主列表的主列表内容偏移量，以使得调整后的主列表内容偏移量与所述目标第二子列表的初始子列表内容偏移量相匹配。

6.根据权利要求1所述的方法，其特征在于，在所述主列表中还包括与所述至少两个第二子列表相关联的选择控件；其中，所述选择控件的数量与所述第二子列表的数量一致；

相应地，所述方法还包括：

当从第一选择控件切换至第二选择控件时，在所述主列表中展示的第二子列表由与所述第一选择控件相关联的第二子列表切换至与所述第二选择控件相关联的第二子列表。

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

所述选择控件的初始位置位于所述第一子列表和所述第二子列表之间；

在所述主列表滚动时，若在当前界面中显示所述选择控件的初始位置，所述选择控件与所述第一子列表以及所述第二子列表同步滚动；

若在当前界面中无法显示所述选择控件的初始位置，所述选择控件悬停于当前界面的顶端或者底端。

8.根据权利要求1或2所述的方法，其特征在于，当所述第二子列表展示所述详情信息时，所述方法还包括：

调节所述第二子列表的高度，以使得调节之后的第二子列表的尺寸与所述详情信息相适配。

9.根据权利要求1所述的方法，其特征在于，在向服务器发送指向目标页面的资源获取请求之前，所述方法还包括：

从本地缓存中读取与目标页面相关联的主题标识和详情信息，若在所述本地缓存中不存在所述主题标识和所述详情信息，才向服务器发送指向所述目标页面的资源获取请求。

10.一种客户端，其特征在于，所述客户端包括网络通信端口、存储器、显示器和处理器，其中：

所述网络通信端口，用于向服务器发送指向目标页面的资源获取请求，并接收所述服务器反馈的所述目标页面的主题标识以及所述目标页面中的详情信息；

所述存储器，用于存储所述主题标识和所述详情信息；

所述显示器，用于展示所述目标页面的主列表，所述主列表中包括多个子列表；其中，所述多个子列表中包括用于展示所述主题标识的第一子列表以及用于展示所述详情信息的第二子列表；

所述处理器，用于当所述主列表滚动时，控制所述第一子列表和所述第二子列表与所述主列表保持同步滚动；所述主列表中包括至少两个第二子列表，不同的第二子列表之间可以相互切换；其中，所述至少两个第二子列表的排列方向与所述主列表的滚动方向相垂直；相应地，所述处理器还用于在当前第二子列表跟随所述主列表滚动时，保持其它第二子列表中展示的内容不变，并使得其它第二子列表的子列表内容偏移量与所述当前第二子列表的子列表内容偏移量保持一致；其它第二子列表具备自身的初始子列表内容偏移量；相应地，所述处理器还用于在从所述当前第二子列表切换至目标第二子列表时，在当前界面中展示所述目标第二子列表中的内容，并将所述目标第二子列表的子列表内容偏移量重置为所述目标第二子列表对应的初始子列表内容偏移量；

所述处理器还用于调整所述主列表的主列表内容偏移量，以使得调整后的主列表内容偏移量与所述目标第二子列表的初始子列表内容偏移量相匹配。

11.根据权利要求10所述的客户端，其特征在于，所述多个子列表中还包括用于展示底部视图的第三子列表；相应地，所述处理器还用于当所述主列表滚动时，控制所述第一子列表、所述第二子列表以及所述第三子列表与所述主列表保持同步滚动。

12.根据权利要求10所述的客户端，其特征在于，所述处理器还用于调整所述主列表的主列表内容偏移量，以使得调整后的主列表内容偏移量与所述目标第二子列表的初始子列表内容偏移量相匹配。

Images