CN111506243A - 页面信息处理方法、装置及电子设备 - Google Patents

Abstract

本申请实施例公开了页面信息处理方法、装置及电子设备，其中，所述方法包括：客户端对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。通过本申请实施例，能够使得页头区域能够充分发挥其应有作用的同时，避免由于所占的页面版幅过大而使得主体内容的展示受到影响。

Description

页面信息处理方法、装置及电子设备

技术领域

本申请涉及页面信息处理技术领域，特别是涉及页面信息处理方法、装置及电子设备。

背景技术

对于一些应用程序或者程序内某个具体功能模块的开发者而言，除了具体业务逻辑的实现之外，具体的前端页面设计也是其中很重要的一环，因为，前端页面是整个应用或者功能的“门面”，会给用户留下第一印象，而该第一印象则可能会影响用户在页面中的停留时间，或者，是否会对某些内容产生兴趣进而通过执行点击等动作形成流量转化，等等。而在具体的页面中，位于页面顶端的页面头部(称为“页头”)则更是第一时间冲击用户的视觉感官。因此，一直以来，对于页头的“装修”等也是开发或设计人员所关注的重点区域。

通常，对于页头的装修主要考虑两个方面，一是具体投放的内容，例如，具体会将一些能够起到营销或烘托氛围的内容展示到该页头区域，等等；另一方面便是具体页头区域的大小，如果页头区域设置的过小，则具体的营销或者烘托氛围的内容可能无法充分展示，具体的效果会受到影响；而如果过大，则又可能因为占据页面的比例过大，而影响页面实际内容的展示，尤其是在移动端的场景下，显示屏的面积有限，使得这种影响可能更为凸显。

因此，如何更有效地进行页面的页头设计，成为需要本领域技术人员解决的技术问题。

发明内容

本申请提供了页面信息处理方法、装置及电子设备，能够使得页头区域能够充分发挥其应有作用的同时，避免由于所占的页面版幅过大而使得主体内容的展示受到影响。

本申请提供了如下方案：

一种页面信息处理方法，包括：

客户端对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：

在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

一种页面信息处理方法，包括：

服务端接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

一种页面信息处理装置，包括：

页面展示单元，用于对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

第一处理单元，用于在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

第二处理单元，用于在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

一种页面信息处理装置，包括：

请求接收单元，用于接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

页面数据返回单元，用于向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：

在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，通过将页面的页头区域设置为可伸缩，同时，页面的主体内容区域可以在页头区域可伸缩范围内进行平移运动，以改变主体内容区域在窗口可视范围内的可视面积，在页头区域伸缩到阈值后，再跟随具体的滑动操作对具体的主体内容进行滚动展示。这样，在页面渲染完毕的初始状态下，页头区域所占的版幅可以比较大，以此能够充分的发挥其氛围渲染等作用；而在触发屏幕滑动等操作后，页头区域的高度还可以收缩，同时通过将主体内容区域上移，使得主体内容区域在整个窗口可视范围内的面积变大，可以更好的对主体内容进行展示。因此，通过本申请实施例，也可以在使得页头区域能够充分发挥其应有作用的同时，避免由于所占的页面版幅过大而使得主体内容的展示受到影响。

在具体实现时，可以通过为具体用于展示主体内容的内层容器对象实例创建“影子”滚动器的方式，实现对用户触发的滚动惯性传递，这样，可以将内层容器对用户触发的感知功能禁用，只通过影子滚动器来进行感知，然后传递到内层容器，以此实现对具体主体内容区域运动方式的控制及切换(从平移到内容滚动等)，避免在进行容器嵌套过程中可能出现的控制混乱等情况。

另外，针对同一目标页面内存在多个内容标签的情况，还可以分别对不同的标签进行不同的页头区域展示方式的配置，例如，可以仅对一级标签页进行页头区域的收缩处理，其他标签页则可以保持页头区域的高度不变，等等

在上述同一目标页面内存在多个内容标签的情况，还可以实现通过多个内层容器分别对不同标签对应的主体内容进行展示，以此提高效率，也即标签切换过程中的流畅度。另外，还可以实现不同标签对同一个内层容器的复用，降低内存暴涨的出现概率。在出现内存高位的情况下，还可以对一些非当前展示的空闲容器进行回收，以此降低对内存的占用。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1是本申请实施例提供的***架构的示意图；

图2是本申请实施例提供的客户端方法的流程图；

图3是本申请实施例提供的页头伸缩示意图；

图4是本申请实施例提供的另一页头伸缩示意图；

图5是本申请实施例提供的容器复用流程图；

图6是本申请实施例提供的服务端方法的流程图；

图7是本申请实施例提供的客户端装置的示意图；

图8是本申请实施例提供的服务端装置的示意图；

图9是本申请实施例提供的电子设备的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

在本申请实施例中，为了能够更有效地进行页面的页头设计，使其在能够更充分地达到营销、气氛渲染等目的的同时，避免由于所占的版幅过大而对页面内主体内容的展示造成影响，提供了相应的解决的方案。在该方案中，可以将具体页面的页头区域设计为可伸缩的状态，在初始状态下，页头区域的面积可以比较大，以便能够更充分地进行营销信息展示或者气氛的渲染；而在用户在页面中触发了滑动等操作后，证明该用户可能已经对页面产生了兴趣，需要进一步对主体内容进行查看，此时，则可以随着用户的滑动操作，对页头区域的高度进行收缩，同时，主体内容区域则可以向上平移，使得屏幕的可视范围内更多地展示出页面的主体内容；在页头区域的高度收缩到一定程度之后，可以在该高度上进行固定展示，然后，如果用户继续向上滑动，则可以控制主体内容区域中的内容随之向上滚动，以使得更多页面内容进入到窗口的可视范围进行展示。

这样，在对具体的页头进行设计时，就不必过多考虑对页面版幅占用的问题，而是优先将该区域对营销信息展示或者氛围的渲染作为首要因素进行考虑，使得用户在进入到页面的初始状态下，首先可以受到版头区域所展示内容的视觉冲击，进而产生继续对该页面进行浏览的兴趣。而在具体用户开始对页面进行向上滑动时，页头区域在营销信息展示或者氛围的渲染方面的“使命”已经基本完成，因此，可以随着用户的滑动操作逐渐收缩，将窗口可视范围更大限度地留给页面的主体内容。这样既可以使得页头区域能够充分发挥其自身所应起到的作用，又能够避免对页面主体内容的展示造成过多的影响。

具体实现时，参见图1，本申请实施例中的具体实现可以由应用程序的客户端，或者应用程序内具体功能模块来实现，等等。例如，如果某页面是某应用程序的首页，由该应用程序的主线程负责该页面的展示，则可以在该应用程序中实现本申请实施例中所述的页头伸缩的相关处理逻辑。如果某页面时某应用程序内具体某个独立功能模块所提供的页面，只有该功能模块需要实现页头的伸缩功能，则也可以在该功能模块的相关代码中实现具体与页头伸缩处理相关的处理逻辑，应用程序内其他功能模块则不受此业务逻辑的影响。另外，如果是基于浏览器进行展示的页面，则可以在页面代码中实现具体页头区域伸缩的相关处理逻辑，等等。总之，本申请实施例中所涉及的相关处理逻辑，都可以在客户端侧实现，服务端只需要对具体的页面数据或内容提供相应的支持即可。

下面对本申请实施例提供的具体实现方案进行详细介绍。

实施例一

首先，本申请实施例一提供了一种页面信息处理方法，参见图2，该方法具体可以包括：

S201：客户端对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

其中，具体实现时，目标页面内具体需要展示的内容、数据等可以从服务端获得，包括页头区域内需要展示的内容或者数据，主体内容区域需要展示的内容或者数据，等等。

在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：

S202：在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

S203：在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

其中，具体页头区域的可伸缩范围信息可以是预先设定的，例如，具体可以对页头区域的最大高度、最小高度等进行设定，这样，该页头区域可以在该最大高度与最小高度之间进行伸缩。在收缩到最小高度后，将会保持不变。为了在页头区域的高度收缩的过程中，能够使得窗口可视范围内主体内容区域得到放大，可以将主体内容区域做整体的向上移位，也就是说，在此过程中，主体内容区域是不会做滚动操作的，在页头区域收缩到最小高度时，主体内容区域再在具体的滑动操作方向上进行滚动。

具体实现时，为了达到上述目的，可以通过多种方式来实现，例如，在一种方式下，可以通过页面容器技术来实现。其中，页面容器是一种可添加页面内容的容器对象，可实现页面内小区域的翻页、幻灯片等多种不同的效果。通常，容器对象至少可以具有以下主要属性：

ID：ID是调用容器对象的属性、变量和函数的唯一标识。

X：容器对象的X坐标，容器对象X坐标是根据父对象的坐标原点和对象的坐标原点而定。默认是容器对象左上角相对于父对象的X坐标位置，若改变坐标原点，则X坐标即为对象坐标原点相对于父对象的X坐标。

Y：容器对象的Y坐标，容器对象Y坐标是根据父对象的坐标原点和对象的坐标原点而定。默认是容器对象左上角相对于父对象的Y坐标位置，若改变坐标原点，则Y坐标即为对象坐标原点相对于父对象的Y坐标。

W：容器对象的宽度，单位为像素。关联比例改变宽高时，宽高按比例改变。

H：容器对象的高度，单位为像素。关联比例改变宽高时，宽高按比例改变。

在具体实现时，同一页面中可以创建多个容器对象，并且可以在不同的容器对象内对不同的内容进行展示控制。因此，在本申请实施例中，首先利用上述特点，来实现具体对页头区域的伸缩，以及将页面主体内容区域进行平移、滚动等相关处理。

具体的，首先可以在对目标页面进行展示时，为所述页头区域创建第一容器对象实例，以用于展现所述页头区域的内容；这样，所述在响应对所述主体内容区域执行的滑动操作的过程中，通过调整所述第一容器对象实例的高度变化，对所述页头区域高度进行伸缩调整。

而对于页面主体内容区域而言，具体的实现方式会相对比较复杂，因为涉及到同一容器对象实例在不同状态下进行不同的处理，有的状态下需要平移，有的状态下需要滚动。而对于同一个容器对象实例而言，通常很难同时设定两种属性，因此，一种可行的方案是通过容器嵌套的方式来实现。也就是说，通过在同一主体内容区域创建两个不同的容器对象实例，然后，通过对两个容器对象实例的相对运动方式进行控制，来达到上述目的。而具体实现时，如果简单的进行两个容器对象实例的嵌套，两个容器对象实例都对用户的滑动操作下滚动，则可能会出现混乱的情况，或者出现卡顿等现象，使得整个页面的展示过程不够流畅。

为此，在本申请实施例中，可以为所述主体内容区域创建具有绑定关系的第二容器对象实例以及第三容器对象实例，其中，具体第二容器对象还可以是第三容器对象的子对象，等等。其中，所述第二容器对象实例用于展现所述主体内容，且处于禁止由用户滑动操作触发滚动的状态，所述第三容器对象实例用于提供滚动器以响应用户滑动操作。也就是说，第二容器对象实例主要用于展示具体的页面主体内容，并且自身也具有滚动功能，但是，该第二容器对象实例不能直接被用户的滑动操作所触发滚动。换言之，具体第二容器对象实例对于响应用户滑动操作这一功能可以设为禁用状态，这样，用户在页面内执行具体的向上、向下等滑动操作时，只会直接触发第三容器对象实例的滚动，而第二容器对象实例则需要根据第三容器对象实例滚动的距离，确定出第一容器对象的伸缩状态后，再确定具体的运动方式。

具体的，可以通过所述第三容器对象实例滚动器响应所述滑动操作，且在滚动器的滚动距离在所述可伸缩区域内时，调整所述第一容器对象实例的高度同步变化，并将所述第二容器对象实例在高度方向上的顶点做与所述滚动器滚动距离相同的位移；而在所述滚动器的滚动距离超出所述可伸缩区域外时，控制所述第二容器对象实例随着所述第三容器对象实例的滚动器进行同步滚动。

也就是说，在本申请实施例提供的上述方案中，第三容器对象实例可以看作是第二容器对象实例的一个“影子”，在第二容器对象实例的“背后”根据用户执行的滑动操作进行滚动，并且可以计算出滚动的距离等信息，相应的，便可以根据第三容器对象实例的滚动距离等信息，对第二容器对象实例的运动状态进行控制。如图3所示，由于整个页面最底层通常还会包括一个外层容器，用于对内部的各容器进行初始化等操作，因此，相应的，本申请实施例中的第二容器对象实例可以称为内层容器，第三容器对象实例可以称为影子滚动器。本申请实施例中通过将内层容器与影子滚动器绑定实现了复合滚动与用户多滚动惯性传递(惯性传递是指将用户触发的滚动惯性由影子滚动器传递到内层容器上的过程)。

具体的，假设页面的初始状态下如图3中的左侧所示，后续随着页面滑动等操作的执行，具体的控制过程可以分为两个阶段：阶段1与阶段2，阶段1指从B点滚动到A点的过程，阶段2指从C点滚动至B点的过程。在阶段1时，页头随着影子滚动器滚动的距离同步缩小，内层容器的Y轴顶点做与影子滚动器滚动距离相同的位移。阶段2：内层容器会随着影子滚动器的滚动做同步滚动。

为了更好的理解本申请实施例提供的上述方案，下面通过一个具体实现中的例子进行介绍：

首先，调用方(是指具体业务方，主要负责调用本申请实施例所提供的业务逻辑，并提供具体要展示的业务内容和本申请实施例中所需要的配置，包括各个容器的位置、高度、宽度、可伸缩的范围等)通过创建目标页面的外层容器，传入具体业务数据与配置内容，完成初始化。

之后，外层容器在初始化时，会创建一个影子滚动器(也即前述第三容器对象实例)，影子滚动器会被用来提供滚动能力与滚动惯性的传递；还会创建一个头部容器(第一容器对象实例)，该头部容器具有高度值、宽度值、可伸缩范围等属性信息，并且可以通过反向调用业务调用方获取头部容器所展示的业务内容。再者，还可以创建内层容器(第二容器对象实例)，并通过将内层容器与影子滚动器做关联绑定。

这样，具体在对页面进行展示的过程中，就可以通过前述提供的方式，实现头部容器的伸缩，以及，对内层容器的平移或者滚动控制。

具体实现时，本申请实施例通过的具体方案可以应用到多种具体的场景中，只要是需要在页头区域透出比较丰富的内容，或者对页头区域的版幅要求比较高的场景中，都可以使用该方案进行实现相应的页头以及主体内容区域的控制。另外，其中一些场景中，所述目标页面可能还包括标签工具栏，用于展示多个可切换的内容标签，以便通过切换所述内容标签，对所述主体内容区域展示的内容进行切换。例如，在网络销售服务***提供的某个功能模块的页面中，主要是用于以用户所在或者所选择的城市为单位，对一些商圈或者商场的信息进行聚合展示。此时，可能会在页面中提供一个首页标签(具体可以称为一级标签)，以及多个具体的商圈或者商场对应的标签(二级标签)，默认状态下，可以展示首页标签下对应的主体内容，在切换到某个商场或者商圈对应的二级标签时，则可以主要对该商场或商圈的信息进行展示，等等。在这种场景下，通常会需要在页面的页头区域呈现出一些对具体的氛围进行渲染的内容，尤其是在首页标签对应的状态下，为了能够吸引用户继续在该标签页中浏览，或者进入到具体某个商场或在商圈的标签页进行浏览，首页标签下对应的页头中可能需要对渲染很多与具体氛围相关的内容。例如，与具体某个城市相关的标志性商圈的图片信息，或者，与某城市相关的特色建筑等相关的图片甚至动图信息，等等。当然，由于具体主体内容区域还会包括更多具体的内容，引导用户进行点击或者浏览，不能在仅关注页头区域的渲染功能，却忽略了对主体内容区域的影响。因此，在这种情况下，就可以使用本申请实施例中所提供的方案实现具体对页头区域以及主体内容展示区域的控制。

例如，如图4所示，在图3所示的例子基础上，外层容器除了创建影子滚动器，头部容器和内层容器之外还可以创建标签工具栏，在其中展示各个用来执行切换操作的标签。如图4所示，其中，A为内层容器高度，B为头部容器的高度，C为影子滚动器的高度，D为内层容器的内容高度，E为影子滚动器的内容高度，J为内层容器滚动位置，K为影子滚动器滚动位置。其中，A＝C，D＝E，J＝K。在状态1对应的情况下，头部容器的高度B可以为最大值，随着向上滑动页面的操作执行，在到达状态2时，头部容器的高度被缩短为最小值。与此同时，标签工具栏的也随之向上移位，在到达状态2时，头部容器的高度不再变化，该标签工具栏的位置也将不再变化。内层容器则是在头部容器从状态1变为状态2的过程中，首先进行向上移位，然后开始随着影子滚动器一起进行滚动。需要说明的是，在内层容器随着影子滚动器进行滚动的过程中，具体的主体内容将会向上滚动，期间，会有内容不断滚出窗口可视范围，也有内容不断进入到窗口可视范围，但头部容器会始终以最小高度的状态存在，标签工具栏依然，以便于随时切换到其他标签页进行浏览。以上所述均是以向上滑动的过程为例进行介绍，而在向下滑动的情况下，则刚好与向上滑动时相反，这里不再详述。

需要说明的是，在上述同一页面中包括一个一级标签，以及多个二级标签的情况下，由于各个二级标签通常与一级标签下具体需要烘托的氛围可能会是相同或者相似的，因此，为了避免重复在多个标签页中分别进行页头缩放操作带来的资源浪费，也为了避免对用户造成审美疲劳，可以仅在一级标签获得展示焦点时，对所述页头区域的高度为可伸缩，在所述二级标签获得焦点时，所述页头区域的高度为固定不变，不再需要做伸缩处理。

其中，关于各个二级标签对应的子页面展示状态下，具体页头区域的高度是可以定制的，例如，可以在配置信息中进行配置，等等。当然，在实际应用中，如果需要对二级标签对应的子页面也进行页头伸缩等处理，也是可以实现的，只要预先进行相应的配置即可。

另外，在上述多标签的场景下，如果是通过页面容器技术实现页头的伸缩等相关处理，则为了在标签切换过程中能够获得更流畅的效果，还可以为所述多个内容标签创建多个第二容器对象实例，以用于通过不同的第二容器对象实例对各内容标签对应的内容进行展示。也就是说，每个不同标签对应的主体内容，可以在不同的第二容器对象实例中进行展示，相对于在同一个容器中进行内容切换的方式而言，效率会比较高，提高切换过程的流畅度。

当然，在实际应用中，如果创建的内层容器数量过多，可能会造成内存暴涨等情况，因此，具体实现时，还可以确定所述第二容器对象实例的数量阈值；这样，在接收到切换到目标内容标签的请求时，可以首先判断是否存在该目标内容标签对应的第二容器对象实例，如果存在，则通过该第二容器对象实例对该目标内容标签对应的内容进行展示，否则，判断已创建的第二容器对象实例总数是否达到所述阈值，如果未超过，则为该目标内容标签创建第二容器对象实例。如果已创建的第二容器对象实例总数已达到所述阈值，则从当前处于空闲状态的第二容器对象实例中选择一第二容器对象实例，以用于对该目标内容标签对应的内容进行展示。

也就是说，可以在内存允许的情况下，尽量保证每个标签页对应一个第二容器对象实例，如果内存出现暴涨情况，则也可以在部分标签页上实现对第二容器对象实例的复用。具体实现时，还可以对着标签切换操作的执行，创建容器复用池，这样，在具体点击某个标签(tab)时，可以执行如图5所示的以下处理：

步骤1：获取新内层容器，进入步骤2；

步骤2：判断容器复用池中是否存在tab索引对应的内层容器，如果命中复用池，进入步骤3，否则进入步骤4；

步骤3：直接使用复用池中命中的内层容器渲染，进入步骤11；

步骤4：获取最大内层容器数量，进入步骤5；

步骤5：判断复用池中内层容器数量是否大于等于最大内层容器数量，进入步骤6；

步骤6：随机选取复用池中非首页的内层容器，进入步骤7；

步骤7：使用随机选中的内层容器渲染对应业务内容，执行步骤11；

步骤8：创建新的内层容器，进入步骤9；

步骤9：将新的内层容器放入复用池中，进入步骤10；

步骤10：使用新创建的内层容器渲染对应的业务内容，进入步骤11；

步骤11：结束。

其中，具体实现时，具体在确定所述第二容器对象实例的数量阈值时，可以是根据预先设定的值进行确定，或者，在另一种方式下，还可以根据已创建的第二容器对象实例的数量，以及当前所在终端设备的内存占用情况，确定所述第二容器对象实例的数量阈值。也就是说，具体的数量阈值可以根据实际的内存占用情况来决定，而不是采用预先设定的固定值，这样可以更好的适应实际终端设备中的实际运行情况，便于在避免内存暴涨的前提下，获得更好的展示效果以及切换效率。

另外，在具体实现时，还可以对内存进行监控，并引入内存回收机制，收到内存高位警告后，将非当前展示的内层容器回收，以避免影响实际的程序运行状况。具体的，可以在当前所在终端设备的内存量达到阈值的情况下，对当前处于空闲状态的第二容器对象实例进行回收处理。其中，还可以在程序内设置内存回收开关，在开关开启的状态下进行上述判断以及回收处理。否则，如果开关未开，可以将收到的内存高位警告信息上传到服务端，由服务端进行后续的处理。

总之，通过本申请实施例，通过将页面的页头区域设置为可伸缩，同时，页面的主体内容区域可以在页头区域可伸缩范围内进行平移运动，以改变主体内容区域在窗口可视范围内的可视面积，在页头区域伸缩到阈值后，再跟随具体的滑动操作对具体的主体内容进行滚动展示。这样，在页面渲染完毕的初始状态下，页头区域所占的版幅可以比较大，以此能够充分的发挥其氛围渲染等作用；而在触发屏幕滑动等操作后，页头区域的高度还可以收缩，同时通过将主体内容区域上移，使得主体内容区域在整个窗口可视范围内的面积变大，可以更好的对主体内容进行展示。因此，通过本申请实施例，也可以在使得页头区域能够充分发挥其应有作用的同时，避免由于所占的页面版幅过大而使得主体内容的展示受到影响。

在具体实现时，可以通过为具体用于展示主体内容的内层容器对象实例创建“影子”滚动器的方式，实现对用户触发的滚动惯性传递，这样，可以将内层容器对用户触发的感知功能禁用，只通过影子滚动器来进行感知，然后传递到内层容器，以此实现对具体主体内容区域运动方式的控制及切换(从平移到内容滚动等)，避免在进行容器嵌套过程中可能出现的控制混乱等情况。

另外，针对同一目标页面内存在多个内容标签的情况，还可以分别对不同的标签进行不同的页头区域展示方式的配置，例如，可以仅对一级标签页进行页头区域的收缩处理，其他标签页则可以保持页头区域的高度不变，等等

在上述同一目标页面内存在多个内容标签的情况，还可以实现通过多个内层容器分别对不同标签对应的主体内容进行展示，以此提高效率，也即标签切换过程中的流畅度。另外，还可以实现不同标签对同一个内层容器的复用，降低内存暴涨的出现概率。在出现内存高位的情况下，还可以对一些非当前展示的空闲容器进行回收，以此降低对内存的占用。

实施例二

该实施例二是与实施例一相对应的，从服务端的角度，提供了一种页面信息处理方法，参见图6，该装置具体可以包括：

S601：服务端接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

S602：向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

关于该实施例二中的未详述部分，请参见前述实施例一中的记载，这里不再赘述。

与实施例一相对应，本申请实施例还提供了一种页面信息处理装置，参见图7，该装置具体可以包括：

页面展示单元701，用于对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

第一处理单元702，用于在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

第二处理单元703，用于在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

其中，所述目标页面包括标签工具栏区域，其中包括多个用于对所述主体内容区域展示的内容进行切换的内容标签；

所述内容标签包括一级标签以及至少一个二级标签；

其中，在所述一级标签获得展示焦点时，对所述页头区域的高度为可伸缩，在所述二级标签获得焦点时，所述页头区域的高度为固定不变。

具体的，所述页面展示单元具体可以包括：

第一容器创建单元，用于为所述页头区域创建第一容器对象实例，以用于展现所述页头区域的内容；

所述第一处理单元具体可以用于：

在所述滑动操作的过程中，通过调整所述第一容器对象实例的高度变化，对所述页头区域高度进行伸缩调整。

另外，所述页面展示单元具体还可以包括：

第二容器创建单元，用于为所述主体内容区域创建具有绑定关系的第二容器对象实例以及第三容器对象实例，其中，所述第二容器对象实例用于展现所述主体内容，且处于禁止由用户滑动操作触发滚动的状态，所述第三容器对象实例用于提供滚动器以响应用户滑动操作；

所述第一处理单元具体可以用于，通过所述第三容器对象实例滚动器响应所述滑动操作，且在滚动器的滚动距离在所述可伸缩范围内时，调整所述第一容器对象实例的高度同步变化，并将所述第二容器对象实例在高度方向上的顶点做与所述滚动器滚动距离相同的位移；

所述第二处理单元具体可以用于，在所述滚动器的滚动距离超出所述可伸缩范围外时，控制所述第二容器对象实例随着所述第三容器对象实例的滚动器进行同步滚动。

具体实现时，所述目标页面还可以包括标签工具栏，用于展示多个可切换的内容标签，以便通过切换所述内容标签，对所述主体内容区域展示的内容进行切换；

此时，所述页面展示单元还可以用于：

为所述多个内容标签创建多个第二容器对象实例，以用于通过不同的第二容器对象实例对各内容标签对应的内容进行展示。

具体的，所述页面展示单元可以用于：

确定所述第二容器对象实例的数量阈值；

在接收到切换到目标内容标签的请求时，判断是否存在该目标内容标签对应的第二容器对象实例，如果存在，则通过该第二容器对象实例对该目标内容标签对应的内容进行展示，否则，判断已创建的第二容器对象实例总数是否达到所述阈值，如果未超过，则为该目标内容标签创建第二容器对象实例。

如果已创建的第二容器对象实例总数已达到所述阈值，则从当前处于空闲状态的第二容器对象实例中选择一第二容器对象实例，以用于对该目标内容标签对应的内容进行展示。

其中，可以根据已创建的第二容器对象实例的数量，以及当前所在终端设备的内存占用情况，确定所述第二容器对象实例的数量阈值。

另外，该装置还可以包括：

内存回收单元，用于在当前所在终端设备的内存量达到阈值的情况下，对当前处于空闲状态的第二容器对象实例进行回收处理。

与实施例二相对于，本申请实施例还提供了一种页面信息处理装置，参见图8，该装置可以包括：

请求接收单元801，用于接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

页面数据返回单元802，用于向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

另外，本申请实施例还提供了一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：

在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

在所述页头区域的高度伸缩到预置阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

以及一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到预置阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

其中，图9示例性的展示出了电子设备的架构，例如，设备900可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理，飞行器等。

参照图9，设备900可以包括以下一个或多个组件：处理组件902，存储器904，电源组件906，多媒体组件908，音频组件910，输入/输出(I/O)的接口912，传感器组件914，以及通信组件916。

处理组件902通常控制设备900的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件902可以包括一个或多个处理器920来执行指令，以完成本公开技术方案提供的方法的全部或部分步骤。此外，处理组件902可以包括一个或多个模块，便于处理组件902和其他组件之间的交互。例如，处理部件902可以包括多媒体模块，以方便多媒体组件908和处理组件902之间的交互。

存储器904被配置为存储各种类型的数据以支持在设备900的操作。这些数据的示例包括用于在设备900上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器904可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件906为设备900的各种组件提供电力。电源组件906可以包括电源管理***，一个或多个电源，及其他与为设备900生成、管理和分配电力相关联的组件。

多媒体组件908包括在设备900和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件908包括一个前置摄像头和/或后置摄像头。当设备900处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。

音频组件910被配置为输出和/或输入音频信号。例如，音频组件910包括一个麦克风(MIC)，当设备900处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器904或经由通信组件916发送。在一些实施例中，音频组件910还包括一个扬声器，用于输出音频信号。

I/O接口912为处理组件902和***接口模块之间提供接口，上述***接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件914包括一个或多个传感器，用于为设备900提供各个方面的状态评估。例如，传感器组件914可以检测到设备900的打开/关闭状态，组件的相对定位，例如所述组件为设备900的显示器和小键盘，传感器组件914还可以检测设备900或设备900一个组件的位置改变，用户与设备900接触的存在或不存在，设备900方位或加速/减速和设备900的温度变化。传感器组件914可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件914还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件914还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件916被配置为便于设备900和其他设备之间有线或无线方式的通信。设备900可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信部件916经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件916还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，设备900可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器904，上述指令可由设备900的处理器920执行以完成本公开技术方案提供的方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

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

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于***或***实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的***及***实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的页面信息处理方法、装置及电子设备，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (15)

1.一种页面信息处理方法，其特征在于，包括：

客户端对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：

在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

2.根据权利要求1所述的方法，其特征在于，

所述目标页面包括标签工具栏区域，其中包括多个用于对所述主体内容区域展示的内容进行切换的内容标签；

所述内容标签包括一级标签以及至少一个二级标签；

其中，在所述一级标签获得展示焦点时，对所述页头区域的高度为可伸缩，在所述二级标签获得焦点时，所述页头区域的高度为固定不变。

3.根据权利要求1所述的方法，其特征在于，

所述对目标页面进行展示，包括：

为所述页头区域创建第一容器对象实例，以用于展现所述页头区域的内容；

所述在响应对所述主体内容区域执行的滑动操作的过程中，包括：

在所述滑动操作的过程中，通过调整所述第一容器对象实例的高度变化，对所述页头区域高度进行伸缩调整。

4.根据权利要求3所述的方法，其特征在于，

所述对目标页面进行展示，还包括：

为所述主体内容区域创建具有绑定关系的第二容器对象实例以及第三容器对象实例，其中，所述第二容器对象实例用于展现所述主体内容，且处于禁止由用户滑动操作触发滚动的状态，所述第三容器对象实例用于提供滚动器以响应用户滑动操作；

所述在响应对所述主体内容区域执行的滑动操作的过程中，包括：

通过所述第三容器对象实例滚动器响应所述滑动操作，且在滚动器的滚动距离在所述可伸缩范围内时，调整所述第一容器对象实例的高度同步变化，并将所述第二容器对象实例在高度方向上的顶点做与所述滚动器滚动距离相同的位移；

在所述滚动器的滚动距离超出所述可伸缩范围外时，控制所述第二容器对象实例随着所述第三容器对象实例的滚动器进行同步滚动。

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

所述目标页面包括标签工具栏，用于展示多个可切换的内容标签，以便通过切换所述内容标签，对所述主体内容区域展示的内容进行切换；

所述方法还包括：

为所述多个内容标签创建多个第二容器对象实例，以用于通过不同的第二容器对象实例对各内容标签对应的内容进行展示。

6.根据权利要求5所述的方法，其特征在于，

所述为所述多个内容标签创建多个第二容器对象实例，包括：

确定所述第二容器对象实例的数量阈值；

在接收到切换到目标内容标签的请求时，判断是否存在该目标内容标签对应的第二容器对象实例，如果存在，则通过该第二容器对象实例对该目标内容标签对应的内容进行展示，否则，判断已创建的第二容器对象实例总数是否达到所述阈值，如果未超过，则为该目标内容标签创建第二容器对象实例。

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

如果已创建的第二容器对象实例总数已达到所述阈值，则从当前处于空闲状态的第二容器对象实例中选择一第二容器对象实例，以用于对该目标内容标签对应的内容进行展示。

8.根据权利要求6所述的方法，其特征在于，

所述确定所述第二容器对象实例的数量阈值，包括：

根据已创建的第二容器对象实例的数量，以及当前所在终端设备的内存占用情况，确定所述第二容器对象实例的数量阈值。

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

在当前所在终端设备的内存量达到阈值的情况下，对当前处于空闲状态的第二容器对象实例进行回收处理。

10.一种页面信息处理方法，其特征在于，包括：

服务端接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

11.一种页面信息处理装置，其特征在于，包括：

页面展示单元，用于对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

第一处理单元，用于在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

第二处理单元，用于在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

12.一种页面信息处理装置，其特征在于，包括：

请求接收单元，用于接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

页面数据返回单元，用于向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

13.一种电子设备，其特征在于，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

对目标页面进行展示，其中，所述目标页面中包括页头区域，以及主体内容区域；

在响应对所述主体内容区域执行的滑动操作的过程中，执行以下处理：

在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；

在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

14.根据权利要求13所述的电子设备，其特征在于，

所述程序指令还用于执行如权利要求2至9任一项所述的方法。

15.一种电子设备，其特征在于，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收客户端提交的对目标页面的访问请求，所述目标页面中包括页头区域，以及主体内容区域；

向所述客户端返回所述目标页面的页面数据，以便所述客户端在响应对所述主体内容区域执行的滑动操作的过程中，在所述页头区域对应的可伸缩范围内，对所述页头区域高度进行伸缩调整，并对所述主体内容区域在高度方向上进行平移处理，以跟随所述页头区域的高度变化；在所述页头区域的高度伸缩到阈值后，所述主体内容区域在所述滑动操作的方向上对所述主体内容进行滚动展示。

Images