控制页面滑动的方法、控制页面方法、系统、设备及计算机可读存储介质与流程

本公开涉及互联网技术领域，特别是涉及一种控制页面滑动的方法、控制页面方法、系统、设备及计算机可读存储介质。

背景技术

在使用个人电脑访问web页面(或称为网页页面)时或者使用手机查阅应用客户端页面的各种数据时，常常需要进行滑动操作才能查看到页面中的全部信息。在访问手机等终端设备的web页面时，也往往会遇到需要滑动web页面的情况。

现有的控制手机等终端设备的web页面进行滑动的方法存在流畅性差、体验差等问题。随着人们越来越多地使用手机端的网页代替客户端，亟需提高页面滑动的体验。

技术实现要素：

本公开的目的在于提供一种新的控制页面滑动的方法、控制页面方法、系统、设备及计算机可读存储介质。

本公开的目的是采用以下的技术方案来实现的。依据本公开提出的控制页面滑动的方法，包括以下步骤：接收输入的滑动操作，根据所述滑动操作确定滑动操作信息，所述滑动操作信息包括滑动触发位置、滑动方向和滑动量；根据所述滑动操作信息、多个节点之间的结构关系以及节点的滑动优先级信息来对所述节点进行控制，以使得页面中的元素或整个页面进行滑动。

本公开的目的还可以采用以下的技术措施来进一步实现。

前述的控制页面滑动的方法，其中，基于所述滑动优先级信息，所述节点包括第一状态节点和第二状态节点；所述第一状态节点比所述第一状态节点的祖先节点早滑动，所述第二状态节点比所述第二状态节点的祖先节点晚滑动。

前述的控制页面滑动的方法，其中，所述的滑动优先级信息包括与多个滑动方向对应的多种滑动优先级。

前述的控制页面滑动的方法，其中，所述的根据所述滑动操作信息、多个节点之间的结构关系以及节点的滑动优先级信息来对所述节点进行控制包括：根据所述滑动触发位置确定滑动起始节点；进行一个或多个滑动更新事件。

前述的控制页面滑动的方法，其中，所述滑动更新事件包括：根据所述滑动起始节点、预设的滑动树和所述滑动优先级信息确定一个或多个滑动链，所述滑动链包含多个可滑动的节点；根据所述滑动链确定一个或多个待响应节点以及所述待响应节点的响应顺序；根据所述滑动方向、所述滑动量、并按照所述响应顺序，来控制所述待响应节点进行滑动并对应地消耗所述滑动量。

前述的控制页面滑动的方法，其中，所述的根据所述滑动起始节点、预设的滑动树和所述滑动优先级信息确定一个或多个滑动链包括，在所述滑动树中，从所述滑动起始节点开始，向祖先节点方向寻找可滑动的节点以确定第一滑动链，所述第一滑动链中的节点按照父子关系排列，获取所述第一滑动链中的节点的所述滑动优先级信息，根据所述第一滑动链和所述滑动优先级信息确定第二滑动链；所述的根据所述滑动链确定所述待响应节点及所述响应顺序包括，将所述第二滑动链中的节点确定为所述待响应节点。

前述的控制页面滑动的方法，其中，所述的根据所述第一滑动链及所述滑动优先级信息确定第二滑动链包括：判断所述第一滑动链中的节点是否为，所述第二状态节点且在所述第一滑动链中具有父节点，若为是，则将所述第二状态节点及所述第二状态节点的所有子孙节点从所述第一滑动链中删除，以得到所述第二滑动链。

前述的控制页面滑动的方法，其中，所述的根据所述滑动链确定一个或多个待响应节点以及所述待响应节点的响应顺序包括：将所述滑动链中的节点确定为所述待响应节点；基于所述滑动链中作为子节点的所述待响应节点先响应、作为父节点的所述待响应节点后响应来确定所述响应顺序。

前述的控制页面滑动的方法，其中，所述的进行一个或多个滑动更新事件包括：按照预设的时间间隔进行多个所述滑动更新事件。

前述的控制页面滑动的方法，其中，所述的进行一个或多个滑动更新事件还包括：在完成一个所述滑动更新事件后，如果所述滑动量尚有剩余，则进行下一个所述滑动更新事件。

前述的控制页面滑动的方法，其中，所述的根据所述滑动链确定一个或多个待响应节点以及所述待响应节点的响应顺序，根据所述滑动方向、所述滑动量、并按照所述响应顺序，来控制所述待响应节点进行滑动并对应地消耗所述滑动量包括：控制所述滑动链的叶子节点进行滑动；如果所述叶子节点变为不可滑动，则控制所述叶子节点在所述滑动链中的父节点进行滑动。

前述的控制页面滑动的方法，其中，所述的页面为终端设备的网页web页面。

本公开的目的还采用以下技术方案来实现。依据本公开提出控制页面方法，包括以下步骤：接收输入的滑动操作，根据所述滑动操作确定滑动操作信息，所述滑动操作信息包括滑动触发位置、滑动方向和滑动量；如果所述滑动方向为第一方向，则控制页面中的多个列表之间进行切换；如果所述滑动方向为第二方向，则根据前述任意一种控制页面滑动的方法来控制所述列表之中的多个项目进行滑动展示。

本公开的目的还采用以下技术方案来实现。依据本公开提出的控制页面滑动的系统，包括：滑动操作信息确定模块，用于接收输入的滑动操作，根据所述滑动操作确定滑动操作信息，所述滑动操作信息包括滑动触发位置、滑动方向和滑动距离；滑动控制模块，用于根据所述滑动操作信息、多个节点之间的结构关系以及节点的滑动优先级信息来对所述节点进行控制，以使得页面中的元素或整个页面进行滑动。

本公开的目的还可以采用以下的技术措施来进一步实现。

前述的控制页面滑动的系统，其中，基于所述滑动优先级信息，所述节点包括第一状态节点和第二状态节点；所述第一状态节点比所述第一状态节点的祖先节点早滑动，所述第二状态节点比所述第二状态节点的祖先节点晚滑动。

前述的控制页面滑动的系统，其中，所述的滑动优先级信息包括与多个滑动方向对应的多种滑动优先级。

前述的控制页面滑动的系统，其中，所述滑动控制模块包括：滑动开始子模块，用于根据所述滑动触发位置确定滑动起始节点；滑动更新子模块，用于进行一个或多个滑动更新事件。

前述的控制页面滑动的系统，其中，所述滑动更新子模块包括：滑动链确定单元，用于根据所述滑动起始节点、预设的滑动树和所述滑动优先级信息确定一个或多个滑动链，所述滑动链包含多个可滑动的节点；响应顺序确定单元，用于根据所述滑动链确定一个或多个待响应节点以及所述待响应节点的响应顺序；节点滑动单元，用于根据所述滑动方向、所述滑动量、并按照所述响应顺序，来控制所述待响应节点进行滑动并对应地消耗所述滑动量。

前述的控制页面滑动的系统，其中，所述的滑动链确定单元包括：第一滑动链确定子单元，用于在所述滑动树中，从所述滑动起始节点开始，向祖先节点方向寻找可滑动的节点以确定第一滑动链，所述第一滑动链中的节点按照父子关系排列；滑动优先级信息获取子单元，用于获取所述第一滑动链中的节点的所述滑动优先级信息；第二滑动链确定子单元，用于根据所述第一滑动链和所述滑动优先级信息确定第二滑动链；所述的响应顺序确定单元具体用于将所述第二滑动链中的节点确定为所述待响应节点。

前述的控制页面滑动的系统，其中，所述的第二滑动链确定子单元具体用于：判断所述第一滑动链中的节点是否为，所述第二状态节点且在所述第一滑动链中具有父节点，若为是，则将所述第二状态节点及所述第二状态节点的所有子孙节点从所述第一滑动链中删除，以得到所述第二滑动链。

前述的控制页面滑动的系统，其中，所述的滑动控制模块包括响应顺序确定子模块，用于：将所述滑动链中的节点确定为所述待响应节点；基于所述滑动链中作为子节点的所述待响应节点先响应、作为父节点的所述待响应节点后响应来确定所述响应顺序。

前述的控制页面滑动的系统，其中，所述的滑动更新子模块还用于：按照预设的时间间隔进行多个所述滑动更新事件。

前述的控制页面滑动的系统，其中，所述的滑动更新子模块还用于：在完成一个所述滑动更新事件后，如果所述滑动量尚有剩余，则进行下一个所述滑动更新事件。

前述的控制页面滑动的系统，其中，所述的滑动更新子模块还用于：控制所述滑动链的叶子节点进行滑动；如果所述叶子节点变为不可滑动，则控制所述叶子节点在所述滑动链中的父节点进行滑动。

前述的控制页面滑动的系统，其中，所述的页面为终端设备的网页web页面。

本公开的目的还采用以下技术方案来实现。依据本公开提出的控制页面系统，包括：滑动操作信息确定模块，用于接收输入的滑动操作，根据所述滑动操作确定滑动操作信息，所述滑动操作信息包括滑动触发位置、滑动方向和滑动量；页面控制模块，用于如果所述滑动方向为第一方向，则控制页面中的多个列表之间进行切换，如果所述滑动方向为第二方向，则根据前述任意一种控制页面滑动的方法来控制所述列表之中的多个项目进行滑动展示。

本公开的目的还采用以下技术方案来实现。依据本公开提出的一种设备，包括：存储器，用于存储非暂时性计算机可读指令；以及处理器，用于运行所述计算机可读指令，使得所述处理器执行时实现前述任意一种控制页面滑动的方法。

本公开的目的还采用以下技术方案来实现。依据本公开提出的一种设备，包括：存储器，用于存储非暂时性计算机可读指令；以及处理器，用于运行所述计算机可读指令，使得所述处理器执行时实现前述任意一种控制页面方法。

本公开的目的还采用以下技术方案来实现。依据本公开提出的一种计算机可读存储介质，用于存储非暂时性计算机可读指令，当所述非暂时性计算机可读指令由计算机执行时，使得所述计算机执行前述任意一种控制页面滑动的方法或前述任意一种控制页面方法。

上述说明仅是本公开技术方案的概述，为了能更清楚了解本公开的技术手段，而可依照说明书的内容予以实施，并且为让本公开的上述和其他目的、特征和优点能够更明显易懂，以下特举较佳实施例，并配合附图，详细说明如下。

附图说明

图1是本公开一个实施例的控制页面滑动的方法的流程框图。

图2是本公开一个实施例提供的进行滑动更新事件的流程框图。

图3是本公开一个实施例提供的确定滑动链的流程框图。

图4a和图4b是本公开一个实施例提供的在一次页面滑动的两个滑动更新事件中所确定滑动链的示意图。

图5为本公开一个实施例提供的页面布局示意图。

图6a为本公开一个实施例提供的在一种页面布局的情况下进行列表切换的示意图。

图6b为本公开一个实施例提供的在另一页面布局的情况下进行列表切换的示意图。

图7是本公开一个实施例的控制页面方法的流程框图。

图8是本公开一个实施例的控制页面滑动的系统的结构框图。

图9是本公开一个实施例提供的滑动控制模块的结构框图。

图10是本公开一个实施例提供的滑动更新子模块的结构框图。

图11是本公开一个实施例提供的滑动链确定单元的结构框图。

图12是本公开一个实施例的控制页面系统的结构框图。

图13是本公开一个实施例的设备的硬件框图。

图14是本公开另一实施例的设备的硬件框图。

图15是本公开一个实施例的计算机可读存储介质的示意图。

具体实施方式

为更进一步阐述本公开为达成预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本公开提出的控制页面滑动的方法、控制页面方法、系统、设备及计算机可读存储介质的具体实施方式、结构、特征及其功效，详细说明如后。

图1为本公开的控制页面滑动的方法一个实施例的示意性流程框图。请参阅图1，本公开示例的控制页面滑动的方法，主要包括以下步骤：

步骤s11，接收输入的滑动操作(scroll，或者称为滚动操作)，根据滑动操作确定滑动操作信息。其中，该滑动操作信息包括滑动触发位置、滑动方向和滑动量。该滑动量是基于滑动操作的位移、速度、力度等得到的，用于控制页面滑动的距离。需要说明的是，该滑动操作不限于是手机等终端设备所接收的滑动手势，也可以是利用其他设备进行的各类的滑动操作。

步骤s12，根据滑动操作信息、多个节点(node)之间的结构关系以及节点的滑动优先级信息，来对节点进行控制，以使得页面中的元素或整个页面进行滑动。具体地，这里所说的节点为页面中的元素或为整个页面。而节点之间的结构关系一般包括：两个节点之间的父子关系、或两个以上节点之间的树状结构关系。由于两个节点的情形可视为多个节点情形的一种特例，以下仅对多个节点的情形进行具体描述。不妨将该树状结构关系称为滑动树(scrolltree)，滑动树一般为预先设置好的。

节点可滑动(可滑动也称为能滑动，节点可滑动也称为元素可滑动)是指子节点(或称为容器内部元素)的长度大于父节点(或称为容器)本身的长度，且子节点(容器内部元素底部)未达到父节点(容器)的边缘(或称为底部)。需要注意的是，可滑动具有方向性，具体地，如果容器内部元素的一个方向的边缘(或称为，一端的底部)未达到容器的对应方向的边缘，则在该方向上可滑动。另外，一个节点可滑动，事实上也就是该节点能够消耗滑动量。页面可滑动包括多种实际情况，例如，一种是对于作为父节点、子节点的两个页面元素，如果子节点的长度大于父节点的长度并设置了对应的滑动属性(在一些示例中，设置了css属性overflow：scroll)，则该子节点为可滑动的；另一种是设备的视口(viewport，一般为设备屏幕的可视区域)作为容器，整个页面作为容器内部元素，如果整个页面的长度大于视口的长度，则该页面为可滑动的，事实上在这种情况中，同样可以将视口和页面视为父节点和子节点。

而节点不可滑动，其实就是子节点在父节点里面的相应方向上没有移动的空间了，例如，当子节点达到父节点的边缘后或者说容器内部元素底部和容器底部对齐以后，就会成为不可滑动状态了。但需要注意的是，当在一个方向上(例如，向上)不可滑动，在其它方向上(例如，向下)还是有可能是可滑动的。

在本公开的一些实施例中，节点的滑动优先级信息包含第一状态和第二状态，或者说，根据滑动优先级信息，节点包括第一状态节点和第二状态节点。其中，一个节点的滑动优先级信息若为第一状态，则表示该节点比该节点的祖先节点早响应(或者说，第一状态节点先于第一状态节点的祖先节点滑动)，若为第二状态则表示该节点比该节点的祖先节点晚响应(或者说，第二状态节点后于第二状态节点的祖先节点滑动)。可选地，滑动优先级默认为第一状态，并可以被设置为第二状态。

在本公开的一些实施例中，对应于不同的滑动方向，节点的滑动优先级信息包括与多个滑动方向对应的多种滑动优先级。可选地，与每个方向对应的滑动优先级的取值都包含第一状态和第二状态。

本公开提出的控制页面滑动的方法，通过根据滑动优先级信息控制节点的滑动，能够提高页面滑动的流畅性和实际体验以及控制页面的方便性。

具体地，基于接收的一个滑动操作可生成多个页面操作事件(webgestureevent)，每个页面操作事件对应滑动状态(scrollstate)，包括滑动开始(scrollbegin)、滑动更新(scrollupdate)和滑动结束(scrollend)。在本公开一些实施例中，步骤s12具体包括：进行滑动开始事件，用于根据滑动触发位置确定滑动起始节点；以及进行一个或多个滑动更新事件。可选地，步骤s12还包括进行滑动结束事件，用于结束本次滑动。

当子节点和父节点都能滑动的时候，为确定节点响应的先后顺序，构造滑动链(scrollchain)并根据滑动节点在滑动链上的位置来确定滑动的先后逻辑。作为一种可选实施例，基于滑动链来进行该滑动更新。图2为本公开的控制页面滑动的方法一个实施例提供的进行滑动更新事件的示意性流程框图。请参阅图2，在本公开的一些实施例中，进行滑动更新事件具体包括：

步骤s21，根据滑动起始节点、预设的滑动树和节点的滑动优先级信息，确定一个或多个滑动链(scrollchain)。该滑动链包含滑动树中的多个可滑动的节点作为滑动节点。

在一些可选示例中，滑动节点在滑动链中按照父子关系排列。不妨将滑动链中的父节点所靠近的一端(或者说，滑动链的根节点所在的一端)称为头部端，子节点所靠近的一端(或者说，滑动链的叶子节点所在的一端)称为尾部端。确定该滑动链的具体方法为，从滑动起始节点开始，从滑动树取出当前节点，判断是否可以滑动，若为可滑动则加入滑动链，然后再去寻找滑动树中当前节点的父节点，再进行判断，直到滑动树的根节点(事实上一般为视口节点)，这样能够依次将可滑动的相关节点加入滑动链。而在另一些可选示例中，滑动节点在滑动链中基于节点的滑动优先级信息来排列。

可选地，在一些示例中，例如前述的滑动优先级信息包括与多个滑动方向对应的多种滑动优先级的实施例中，还需要根据滑动方向来确定滑动链。

步骤s22，根据该滑动链确定一个或多个待响应节点以及该待响应节点的响应顺序(或者称为滑动顺序)。具体地，将滑动链中的滑动节点确定为待响应节点。可选地，基于滑动链中作为子节点的待响应节点先响应、作为父节点的待响应节点后响应(在一些示例中也就是按照从滑动链的尾部端到头部端的顺序)来确定各个待响应节点的响应顺序。

步骤s23，根据滑动方向、滑动量、并按照该响应顺序，来控制待响应节点进行滑动，并对应地消耗该滑动量。

在一些示例中，在完成一个滑动更新事件后，如果滑动量尚有剩余，则再进行下一个滑动更新事件，直到将滑动量完全消耗为止。

在一些示例中，按照预设的时间间隔来进行多个滑动更新事件，可选地，当滑动量完全消耗后，进行滑动结束事件。可以将该时间间隔取得非常短，从而使得滑动更新事件进行得很密集，这时在一个滑动更新中一般仅滑动一个节点，一般需要多个滑动更新事件才能将一个节点滑完。事实上，每个滑动更新事件都使得页面元素或整个页面进行了一小段距离的位移。因此在一些示例中，在一个滑动更新事件中，取滑动链的尾部端的叶子节点进行滑动并对应地消耗滑动量。

本公开提出的控制页面滑动的方法，基于滑动链来判断滑动的先后逻辑，能够大大提高页面滑动的流畅性和实际体验以及控制页面的方便性。

在一些示例中，滑动节点在滑动链中按照父子关系排列，子节点在滑动链的尾部而父节点在滑动链的头部，而控制节点进行滑动的过程是从滑动链尾部开始依次取出可滑动节点进行处理的，因此可以先根据滑动树寻找可滑动的节点组成滑动链，再根据滑动优先级信息调整滑动链中的节点的顺序。图3为本公开的控制页面滑动的方法一个实施例提供的确定滑动链的示意性流程框图。请参阅图3，在本公开的一个实施例中，步骤s21中的确定滑动链的过程具体包括：

步骤s31，在滑动树中，从滑动起始节点开始，向父节点方向寻找可滑动的节点，以确定第一滑动链。该第一滑动链中的节点按照父子关系排列，不妨令父节点靠近头部端、子节点靠近尾部端。具体地，从滑动起始节点开始，从滑动树取出当前节点，判断是否可以滑动(或者说，是否能够消耗滑动量)，若是的话加入一个滑动链(作为第一滑动链)，然后再去寻找在滑动树中当前节点的父节点，再进行该判断，直到滑动树的根节点为止，这样就能完成第一滑动链的构造。值得注意的是，在一些示例中，节点是否可滑动是具有方向性的，进而在进行上述判断的过程中需要具体判断：在滑动方向上节点是否可滑动。

步骤s32，获取第一滑动链中的节点的滑动优先级信息。

步骤s33，根据第一滑动链和滑动优先级信息，确定第二滑动链。可选地，在一些示例中(例如前述的滑动优先级信息包括与多个滑动方向对应的多种滑动优先级的实施例)，还需要根据滑动方向来确定第二滑动链。

进而在本实施例中，步骤s22具体包括：将该第二滑动链中的滑动节点确定为待响应节点，根据待响应节点在第二滑动链中的顺序确定该待响应节点的响应顺序。一般来说，同样可以按照在第二滑动链中作为子节点的待响应节点先响应、作为父节点的待响应节点后响应来确定该响应顺序。另外需要注意的是，在一些示例中，滑动更新事件的时间间隔非常短，这时仅需将该第二滑动链尾部的叶子节点作为待响应节点，并在该滑动更新事件中控制该第二滑动链的叶子节点进行滑动。

具体地，可以通过多种方式来确定第二滑动链。在本公开的一些实施例中，确定第二滑动链的过程包括，判断第一滑动链中的滑动节点是否为：第二状态节点且在第一滑动链中具有父节点，若为是，则将该第二状态节点及该第二状态节点的所有子孙节点从第一滑动链中删除，以得到第二滑动链。可选地，可以从第一滑动链的叶子节点开始向父节点方向进行本判断。而在本公开的另一些实施例中，通过将第一滑动链从第二状态节点处断开以生成多个第二滑动链，并且按照靠近根节点(或者说靠近第一滑动链头部端)的第二滑动链先响应、靠近叶子节点(或者说靠近第一滑动链尾部端)的第二滑动链后响应的方式来设置这些第二滑动链的响应顺序。

作为一种可选示例，本公开的步骤s33具体包括：从第一滑动链的尾部端(或者说叶子节点)开始，依次对第一滑动链中每个滑动节点进行判断：如果当前节点的与滑动方向对应的滑动优先级为第一状态，则继续对当前节点在第一滑动链中的父节点进行本判断；如果当前节点的与滑动方向对应的滑动优先级为第二状态且当前节点在第一滑动链中具有父节点，则将当前节点及当前节点的所有子孙节点从该第一滑动链中删除，然后继续对当前节点在第一滑动链中的父节点进行本判断。然后，将对第一滑动链中所有滑动节点进行本判断后形成的滑动链确定为第二滑动链。这样可以在不改变节点在滑动链中按照父子关系排列这个特征的前提下，控制节点进行响应。

图4a和图4b为本公开一个实施例提供的在一次滑动过程的两个滑动更新事件中所确定的滑动链的示意图。请参阅图4a，在本公开的一个控制页面滑动方法的具体示例中，在一个滑动更新事件(不妨称为第一滑动更新事件)中所确定的第一滑动链中顺序排列有1号、2号、3号和4号四个节点，1号节点靠近头部端(或者说1号节点是第一滑动链中的根节点)，4号节点靠近尾部端(或者说4号节点是第一滑动链中的叶子节点)。如果其中的4号节点为第二状态节点，其他节点为第一状态节点，则在利用本公开实施例所示的确定第二滑动链的方法来控制页面滑动的过程中，在第一滑动更新事件中，将删除第一滑动链中的4号节点，从而生成一个包含1号节点、2号节点和3号节点的第二滑动链(图4a虚线左侧的滑动链)，并在该第一滑动更新事件中取第二滑动链的尾部端的3号节点进行滑动并对应地消耗滑动量。如果完成该第一滑动更新事件之后仍有剩余的滑动量，则会进行下一个滑动更新事件(不妨称为第二滑动更新事件)。如图4b所示，如果3号节点在第一滑动更新事件之中经过滑动后变为不可滑动的状态，那么3号节点就不再进入滑动链之中，从而在第二滑动更新事件中将生成一个包含1号节点、2号节点和4号节点的第一滑动链。在第二滑动更新事件中，由于4号节点为第二状态节点且具有可滑动的祖先节点，所以4号节点仍会被从第一滑动链中删除以得到包含1号节点和2号节点的第二滑动链(图4b虚线左侧的滑动链)。在经历了多个滑动更新事件之后，当4号节点没有可滑动的祖先节点的时候，4就不从滑动链中删除，此时再对4号节点进行滑动。从而实现了先滑动4号节点的祖先节点，等到4号节点的所有祖先节点均变为不可滑动之后，再滑动4号节点。

本公开提出的控制页面滑动的方法，通过基于滑动树构造第一滑动链，再基于滑动优先级信息构造第二滑动链，并根据第二滑动链来控制节点进行响应，能够更加便利地控制各个待响应节点进行滑动的先后逻辑，进而能够大大提高页面滑动的流畅性和实际体验以及控制页面的方便性。

现有的控制网页端滑动优先级主要利用javascript来实现，方案比较复杂。在本公开一个实施例中，提出一个新的css规则“overflow-propagation”，允许开发者自由控制节点的滑动优先级，从而为控制网页滚动提供更好的解决方案。具体地，对应于上下左右四个方向的滑动操作，该overflow-propagation系列具体包括四个属性：overflow-propagation-up、overflow-propagation-down、overflow-propagation-left和overflow-propagation-right，每个属性所取的属性值有两个：normal(传统状态，对应于前述的第一状态)或parent(父节点优先状态，对应于前述的第二状态)，其中该normal状态为传统的滑动优先级，表示滑动效果首先作用于最近的子节点，再作用于父节点，或者说，子节点先滑动，当子节点变为不可滑动后，该子节点的父节点才开始滑动；该parent状态为改进后新的效果，表示先滑动该子节点的父节点，当该子节点的所有的祖先节点变为不可滑动后，再滑动该子节点。

作为一个可选示例，对每个节点设置overflow_propagation属性，在按照前述的本公开示例的方法生成滑动链的过程中，监视具有overflow_propagation属性的节点来生成滑动链。具体地，记住第一滑动链中具有overflow_propagation属性为parent状态且可以滑动(能够消耗滑动量)的节点的父节点，设置为priority_scroll_node，然后在循环结束后从第一滑动链中删除priority_scroll_node以后的节点，以得到第二滑动链。而如果具有overflow_propagation属性的节点并没有父节点，就不会将该节点从第一滑动链中删除。仍以前述的第一滑动链中顺序排列有1号、2号、3号和4号四个节点且1号节点为根节点、4号节点为叶子节点的情况为例，如果4号节点的overflow-propagation-up属性的取值为parent，其它节点的该属性的取值为normal，则向上滑动时的滑动顺序为3->2->1->4；而如果2号节点overflow-propagation-down属性的取值为parent，其它节点的该属性的取值为normal，那么向下滑动时的滑动顺序为1->4->3->2。

利用本公开所示方法进行手机端的web页面开发，只需在对应节点上增加本公开示例的overflow-propagation系列属性，便可实现流畅地控制页面滑动的效果。

在滑动更新过程中，如果采用了取滑动链尾部端的叶子节点进行滑动的方式，当叶子节点从可滑动状态变为不可滑动状态时，可以采用多种处理方式。在本公开的一个实施例中，如果在一个滑动更新事件中叶子节点变为不可滑动(或者说，不能消耗滑动量)，则进行滑动结束事件，从而虽然本次滑动操作还剩余有未消耗完的滑动量，但不再传递给父元素了，或者说，不再滑动父结点了，这种现象称为滑动闩锁。而本公开的另一实施例中，也可以取消该滑动闩锁，具体地，如果在一个滑动更新事件中叶子节点变为不可滑动状态(或者说，不能消耗滑动量)，则控制该叶子节点在滑动链中的父节点进行滑动并对应地消耗滑动量。

进一步地，可以为节点设置滑动闩锁信息，以判断节点变为不可滑动状态之后是否继续滑动父节点。在本公开的一些实施例中，进行滑动更新事件还包括：获取节点的滑动闩锁信息，该滑动闩锁信息包含第三状态和第四状态，或者说，根据滑动闩锁信息，节点包括第三状态节点和第四状态节点；其中，一个节点的滑动闩锁信息若为第三状态，表示该节点变为不可滑动后，将未消耗的滑动量传递给该节点的父节点，一个节点的滑动闩锁信息若为第四状态，表示该节点变为不可滑动后，不将未消耗的滑动量传递给该节点的父节点；然后根据该滑动闩锁信息进行判断，如果滑动链的叶子节点为第三状态节点，则该叶子节点变为不可滑动状态(或者说，不能消耗滑动量)后，对该叶子节点在滑动链中的父节点继续进行滑动并继续对应地消耗滑动量，如果滑动链的叶子节点为第四状态节点，则该叶子节点变为不可滑动状态后进行滑动结束事件。具体地，本公开提出一种终端设备网页端的新的css规则“continuous-scroll:continuous；”。网页端对滑动操作的基础交互是在子节点不能消耗滑动量的时候不能再去滑动父节点的，但是如果加了该“continuous-scroll:continuous；”属性，那么就会去滑动父节点，从而实现了滑动闩锁的解除。

图5为本公开一个实施例提供的页面布局示意图。图5中的记载有用户信息的标题部分为页面的父元素，图5中的包含多个作品的列表部分为页面的子元素。在用户更关注页面中的子元素的情况下，通过将子元素设置为第二状态并按照本公开所示方法控制页面进行滑动，能够先滑动父元素，使父元素先滑出视口，并使更有价值的子元素很快全部暴露在视口。而在传统的子元素优先的情况下(即前述的第一状态)，会一直滑动子元素，而父元素一直在视口内，让更有价值的子元素内容占据的显示位置变少。

在一些示例中，如图5所示，记载有用户信息的标题部分为页面的头部(head)；页面头部下方设置导航标签(nav)，导航标签用于标示出各个列表的名称；导航标签下方设有列表容器(container)，列表容器用于容纳列表所包含的多个项目(item)(事实上，每个列表为多个项目的集合)。在页面包含多个列表时，响应于用户的操作(例如滑动手势)，多个列表在容器之中进行切换，并且在同一时刻容器之中仅可以显示多个列表中的一个，例如在图5中，列表容器之中显示的是作品列表，包含作品1、作品2等多个项目，而喜欢列表并未在列表容器之中。

对列表容器和每个列表可以采用两种页面布局方式。图6a和图6b为本公开实施例提供的在两种页面布局的情况下进行列表切换的示意图。如图6a所示，一种布局方式为将列表容器的长度设置得与列表中的所有项目的累积长度一致，采用这种方式的列表在进行切换时，会由于页面头部位置的瞬移而使整个网页产生很突兀的变化(不妨称之为，使页面头部抖动)。如图6b所示，另一种布局方式为将列表容器的长度固定并使其等于视口长度，采用这种方式的列表在进行切换时，不会使页面头部发生抖动，但按照传统的滑动方法控制列表项目在列表容器内滑动展示时，会由于页面头部一直位于视口内而不便于列表切换。因此，可以在控制页面的过程中，利用前述的本公开示例的任意一种控制页面滑动方法来对页面中的多个列表之中的多个项目进行滑动展示，以使页面头部先滑出视口。具体地，图7为本公开的控制页面方法一个实施例的示意性流程框图。请参阅图7，本公开示例的控制页面方法，主要包括以下步骤：

步骤s41，接收输入的滑动操作，根据该滑动操作确定滑动操作信息，该滑动操作信息包括滑动触发位置、滑动方向和滑动量；

步骤s42，根据该滑动方向，如果滑动方向为第一方向，则控制页面中的多个列表之间进行切换；如果滑动方向为第二方向，则根据前述的本公开提出的控制页面滑动方法的任意一个实施例来控制列表之中的多个项目进行滑动展示。其中，该第一方向、该第二方向之间具有一定角度，例如，在一种可选示例中，该第一方向、该第二方向之中的一个为沿页面的横向、另一个为沿页面的纵向。

本公开提出的控制页面方法，通过根据滑动优先级信息控制节点的滑动，能够提高页面展示(尤其是多个列表切换过程)的流畅性和实际体验。

需要注意的是，前述的本公开提出的控制页面滑动方法和控制页面方法的各个实施例特别适用于对终端设备的网页web页面的滑动控制。

图8为本公开的控制页面滑动的系统一个实施例的示意性结构图。请参阅图8，本公开示例的控制页面滑动的系统1000，主要包括滑动操作信息确定模块1100和滑动控制模块1200。

其中，该滑动操作信息确定模块1100用于接收输入的滑动操作，根据滑动操作确定滑动操作信息。其中，该滑动操作信息包括滑动触发位置、滑动方向和滑动量。

该滑动控制模块1200用于根据滑动操作信息、多个节点之间的结构关系以及节点的滑动优先级信息，来对节点进行控制，以使得页面中的元素或整个页面进行滑动。具体地，这里所说的节点为页面中的元素或为整个页面。

图9为本公开一个实施例提供的滑动控制模块的示意性结构图。请参阅图9，在本公开一些实施例中，滑动控制模块1200包括：滑动开始子模块1210，用于根据滑动触发位置确定滑动起始节点；以及滑动更新子模块1220，用于进行一个或多个滑动更新事件。可选地，滑动控制模块1200还包括滑动结束子模块(图中未示出)，用于结束本次滑动。

图10为本公开一个实施例提供的滑动更新子模块的示意性结构图。请参阅图10，在本公开一些实施例中，滑动更新子模块1220主要包括滑动链确定单元1221、响应顺序确定单元1222和节点滑动单元1223。

该滑动链确定单元1221用于根据滑动起始节点、预设的滑动树和节点的滑动优先级信息，确定一个或多个滑动链。该滑动链包含滑动树中的多个可滑动的节点。可选地，在一些示例中(例如前述的滑动优先级信息包括与多个滑动方向对应的多种滑动优先级的实施例)，滑动链确定单元1221还需要根据滑动方向来确定滑动链。

该响应顺序确定单元1222用于根据该滑动链确定一个或多个待响应节点以及该待响应节点的响应顺序。可选地，该响应顺序确定单元1222具体用于基于滑动链中作为子节点的待响应节点先响应、作为父节点的待响应节点后响应来确定各个待响应节点的响应顺序。

该节点滑动单元1223用于根据滑动方向、滑动量、并按照该响应顺序，来控制待响应节点进行滑动，并对应地消耗该滑动量。

在本公开的一些实施例中，滑动更新子模块1220还用于：按照预设的时间间隔进行多个滑动更新事件，直到将滑动量完全消耗为止。

在本公开的一些实施例中，滑动更新子模块1220还用于：在完成一个滑动更新事件后，如果滑动量尚有剩余，则再进行下一个滑动更新事件，直到将滑动量完全消耗为止。

图11为本公开一个实施例提供的滑动链确定单元的示意性结构图。请参阅图11，在本公开一些实施例中，滑动链确定单元1221包括：第一滑动链确定子单元1221a，用于在滑动树中，从滑动起始节点开始，向父节点方向寻找可滑动的节点，以确定第一滑动链，该第一滑动链中的节点按照父子关系排列；滑动优先级信息获取子单元1221b，用于获取第一滑动链中的节点的滑动优先级信息；第二滑动链确定子单元1221c，用于根据第一滑动链和滑动优先级信息，确定第二滑动链。进而在本实施例中，响应顺序确定单元1222具体用于将该第二滑动链中的滑动节点确定为待响应节点，根据待响应节点在第二滑动链中的顺序确定该待响应节点的响应顺序。

作为一种可选示例，该第二滑动链确定子单元1221c具体用于：判断第一滑动链中的滑动节点是否为：第二状态节点且在第一滑动链中具有父节点，若为是，则将该第二状态节点及该第二状态节点的所有子孙节点从第一滑动链中删除，以得到第二滑动链。可选地，第二滑动链确定子单元1221c可以从第一滑动链的叶子节点开始向父节点方向进行该判断。

在本公开的一些实施例中，滑动控制模块1200包括响应顺序确定子模块(图中未示出)具体用于：将滑动链中的节点确定为待响应节点；基于滑动链中作为子节点的待响应节点先响应、作为父节点的待响应节点后响应来确定待响应节点的响应顺序。

在本公开的一些实施例中，滑动更新子模块1220还用于：控制滑动链的叶子节点进行滑动；如果该叶子节点变为不可滑动，则控制该叶子节点在滑动链中的父节点进行滑动。

图12为本公开的控制页面系统一个实施例的示意性结构图。请参阅图12，本公开示例的控制页面系统2000，主要包括滑动操作信息确定模块2100和页面控制模块2200。

该滑动操作信息确定模块2100用于接收输入的滑动操作，根据该滑动操作确定滑动操作信息。该滑动操作信息包括滑动触发位置、滑动方向和滑动量。

该页面控制模块2200用于：根据该滑动方向，如果滑动方向为第一方向，则控制页面中的多个列表之间进行切换；如果滑动方向为第二方向，则根据前述的本公开提出的控制页面滑动方法的任意一个实施例来控制列表之中的多个项目进行滑动展示。

本公开提出的控制页面滑动的方法的各种实施方式或本公开提出的控制页面方法的各种实施方式可以以使用例如计算机软件、硬件或其任何组合的计算机可读介质来实施。对于硬件实施，本公开提出的控制页面滑动的方法的各种实施方式或本公开提出的控制页面方法的各种实施方式可以通过使用特定用途集成电路(asic)、数字信号处理器(dsp)、数字信号处理装置(dspd)、可编程逻辑装置(pld)、现场可编程门阵列(fpga)、处理器、控制器、微控制器、微处理器、被设计为执行这里描述的功能的电子单元中的至少一种来实施，在一些情况下，本公开提出的控制页面滑动的方法的各种实施方式或本公开提出的控制页面方法的各种实施方式可以在控制器中实施。对于软件实施，本公开提出的控制页面滑动的方法的各种实施方式或本公开提出的控制页面方法的各种实施方式可以与允许执行至少一种功能或操作的单独的软件模块来实施。软件代码可以由以任何适当的编程语言编写的软件应用程序(或程序)来实施，软件代码可以存储在存储器中并且由控制器执行。

图13是图示根据本公开的一个实施例的设备的硬件框图。如图13所示，根据本公开实施例的设备3000包括存储器3001和处理器3002。该设备3000中的各组件通过总线系统和/或其它形式的连接机构(未示出)互连。本公开的设备3000可以以各种形式来实施，包括但不限于服务器或诸如移动电话、智能电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、导航装置、车载终端设备、车载显示终端、车载电子后视镜等等的移动终端设备以及诸如数字tv、台式计算机等等的固定终端设备。

该存储器3001用于存储非暂时性计算机可读指令。具体地，存储器3001可以包括一个或多个计算机程序产品，该计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。该易失性存储器例如可以包括随机存取存储器(ram)和/或高速缓冲存储器(cache)等。该非易失性存储器例如可以包括只读存储器(rom)、硬盘、闪存等。

该处理器3002可以是中央处理单元(cpu)或者具有数据处理能力和/或指令执行能力的其它形式的处理单元，并且可以控制该设备3000中的其它组件以执行期望的功能。在本公开的一个实施例中，该处理器3002用于运行该存储器3001中存储的该计算机可读指令，使得该设备3000执行前述的本公开各实施例的控制页面滑动的方法的全部或部分步骤。

图14是图示根据本公开的另一实施例的设备的硬件框图。如图14所示，根据本公开实施例的设备4000包括存储器4001和处理器4002。该设备4000中的各组件通过总线系统和/或其它形式的连接机构(未示出)互连。本公开的设备4000可以以各种形式来实施，包括但不限于服务器或诸如移动电话、智能电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、导航装置、车载终端设备、车载显示终端、车载电子后视镜等等的移动终端设备以及诸如数字tv、台式计算机等等的固定终端设备。

该存储器4001用于存储非暂时性计算机可读指令。具体地，存储器4001可以包括一个或多个计算机程序产品，该计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。该易失性存储器例如可以包括随机存取存储器(ram)和/或高速缓冲存储器(cache)等。该非易失性存储器例如可以包括只读存储器(rom)、硬盘、闪存等。

该处理器4002可以是中央处理单元(cpu)或者具有数据处理能力和/或指令执行能力的其它形式的处理单元，并且可以控制该设备4000中的其它组件以执行期望的功能。在本公开的一个实施例中，该处理器4002用于运行该存储器4001中存储的该计算机可读指令，使得该设备4000执行前述的本公开各实施例的控制页面方法的全部或部分步骤。

图15是图示根据本公开的实施例的计算机可读存储介质的示意图。如图15所示，根据本公开实施例的计算机可读存储介质5000，其上存储有非暂时性计算机可读指令5001。当该非暂时性计算机可读指令5001由处理器运行时，执行前述的本公开各实施例的控制页面滑动的方法的全部或部分步骤或本公开各实施例的控制页面方法全部或部分步骤。

以上，根据本公开实施例的控制页面滑动的方法、控制页面方法、系统、设备及计算机可读存储介质，通过根据滑动优先级信息控制页面进行滑动，能够提高页面滑动、列表切换的流畅性和实际体验以及控制页面的方便性。进一步地，本公开通过构造第一滑动链和第二滑动链来判断滑动的先后逻辑，能够大大提高页面滑动、列表切换的流畅性和实际体验。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

另外，如在此使用的，在包含“至少一个”、“一个或多个”、“一种或多种”的项的列举中使用的“或”指示分离的列举，以便例如“a、b或c的至少一个”或“a、b或c的一种或多种”的列举意味着a或b或c，或ab或ac或bc，或abc(即a和b和c)。此外，措辞“示例的”不意味着描述的例子是优选的或者比其他例子更好。

还需要指出的是，在本公开的系统和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

可以不脱离由所附权利要求定义的教导的技术而进行对在此所述的技术的各种改变、替换和更改。此外，本公开的权利要求的范围不限于以上所述的处理、机器、制造、事件的组成、手段、方法和动作的具体方面。可以利用与在此所述的相应方面进行基本相同的功能或者实现基本相同的结果的当前存在的或者稍后要开发的处理、机器、制造、事件的组成、手段、方法或动作。因而，所附权利要求包括在其范围内的这样的处理、机器、制造、事件的组成、手段、方法或动作。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。