一种页面处理方法及计算设备与流程

本发明涉及页面显示技术领域，尤其是一种页面处理方法及计算设备。

背景技术：

在前端技术中，页面的滚动回弹效果指的是，页面在滚动到底或到顶后，用户继续拖动页面，页面会继续向着滚动方向小幅度移动，当用户松开页面后，页面按照一定的速度又回到初始位置的效果。目前市面上只有ios系统和部分浏览器支持这个效果。

在大多数浏览器中，要实现这个效果，需要依赖javascript库。通常，依赖javascript库来实现回弹效果，实现方式都是使用requestanimationframe+transform，模拟浏览器滚动。其实现原理是监听页面的触摸或拖拽或滚轮事件，然后，通过requestanimationframe实时改变页面的transform中的位移(x或y)值，在位移值到达临界值后继续改变其值，最终，在页面滚动或拖放结束后，通过一定的速度把位移值设回到临界值。

这种模拟浏览器滚动的方式，首先是代表放弃了默认的浏览器滚动，从滚动效果上讲终究还是会和浏览器默认滚动存在细微差异。其次是滚动条的处理和滚动事件的派发，这些都是需要库的维护者自行实现。再者，鼠标滚轮的支持也需要启用额外的配置项，并且在进行屏幕旋转或是其他一些改变屏幕大小的操作时，模拟滚动的相关参数也都需要进行刷新。大部分库虽然提供了默认的刷新机制，但是某些特殊情况下还是会出现问题，这就需要开发者凭借实践经验和能力去解决。最后是当滚动块滚动到底或者到顶后不能触发父元素的滚动，而是直接出现回弹效果，如果要触发父元素的滚动就需要开发者自行实现或者进行其他配置才能达到目标。

鉴于此，需要一种能够适用于浏览器的滚动回弹方式，来克服上述各种兼容性问题。

技术实现要素：

为此，本发明提供了一种页面处理方案，以力图解决或者至少缓解上面存在的至少一个问题。

根据本发明的一个方面，提供了一种页面处理方法，包括步骤：标记布置在页面上的待处理的第一元素；按照显示效果，插入至少一个与第一元素相邻的第二元素；响应于用户对所述第一元素的滑动触摸操作，确定触摸事件的值；根据触摸事件的值，确定第二元素的显示值。

可选地，根据本发明的方法还包括步骤：基于第二元素的显示值，来生成页面的显示效果。

可选地，在根据本发明的方法中，按照显示效果，插入至少一个与第一元素相邻的第二元素的步骤包括：若显示效果为垂直方向上的回弹显示，则插入两个与第一元素在垂直方向上相邻的第二元素；若显示效果为水平方向上的回弹显示，则插入两个与第一元素在水平方向上相邻的第二元素。

可选地，在根据本发明的方法中，在响应于用户对第一元素的滑动触摸操作，确定触摸事件的值的步骤之前，还包括步骤：为第一元素设置滑动触摸事件，其中，滑动触摸事件包括触摸开始事件、触摸滑动事件和触摸结束事件。

可选地，在根据本发明的方法中，响应于用户对第一元素的滑动触摸操作，确定触摸事件的值的步骤包括：响应于用户对第一元素的触摸操作，记录触摸起始位置，作为触摸开始事件的值；在用户对第一元素的滑动过程中，实时记录滑动位置，作为触摸滑动事件的值；在用户停止对第一元素的触摸操作时，设置触摸结束事件的值。

可选地，在根据本发明的方法中，根据触摸事件的值，确定第二元素的显示值的步骤包括：基于触摸开始事件的值和所述触摸滑动事件的值，确定出滑动距离和滑动方向；基于滑动方向，确定待显示的第二元素；基于滑动距离，设置所确定的第二元素的显示高度或显示宽度；以及基于触摸结束事件的值，再次设置该第二元素的显示高度或显示宽度。

可选地，在根据本发明的方法中，基于滑动方向，确定待显示的第二元素的步骤还包括：当滑动方向为垂直向上滑动时，确定位于第一元素下方的第二元素为待显示的第二元素；当滑动方向为垂直向下滑动时，确定位于第一元素上方的第二元素为待显示的第二元素；当滑动方向为水平向左滑动时，确定位于第一元素右方的第二元素为待显示的第二元素；当滑动方向为水平向右滑动时，确定位于所述元素左方的第二元素为待显示的第二元素。

可选地，在根据本发明的方法中，基于滑动距离，设置所确定的第二元素的显示高度或显示宽度的步骤还包括：若滑动方向为垂直方向，则设置显示高度；若滑动方向为水平方向，则设置显示宽度；其中，按照如下公式来确定第二元素的显示高度或显示宽度，

y＝|y2-y1|/k，

其中，y表示显示高度或显示宽度，y2表示触摸滑动事件的值，y1表示触摸开始事件的值，k表示距离系数。

根据本发明的另一方面，提供了一种计算设备，包括：一个或多个处理器；和存储器；一个或多个程序，其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行如上所述方法中的任一方法的指令。

根据本发明的再一方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，指令当计算设备执行时，使得计算设备执行如上所述方法中的任一方法。

根据本发明的方案，在浏览器默认的滚动功能上，实现了页面的回弹效果，其优势在于：需要更少的配置项，维护工作大大减少；基于浏览器的默认滚动功能，性能和兼容性可以得到保证；在所有的平台上均能实现统一的回弹效果；代码少，文件体积小，下载速度快。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个实施例的计算设备100的构造示意图；

图2示出了根据本发明一个实施例的页面处理方法200的流程示意图；

图3a-图3d示出了根据本发明一个实施例的页面显示效果的示意图；

图4a-图4d示出了根据本发明另一个实施例的页面显示效果的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

根据本发明的实施方式，提供了一种新的页面处理方案，以基于浏览器的默认滚动功能，实现web页面的滚动回弹效果。通常，web页面的滚动回弹效果分为两种：下拉刷新和上拉加载。下面以页面垂直滚动的场景为例，简单阐述这两种显示效果。

下拉刷新，指的是拖动页面到顶后，继续拖动页面，当其拖动距离达到某个阀值后，松开页面后发生的行为。下拉刷新一般用来刷新页面中的内容，多用于各种资讯类、电商类列表或首页中。

上拉加载，指的是拖动页面到底后，继续拖动页面，当其拖动距离达到某个阀值后，松开页面后发生的行为。上拉加载一般用来从页面底部往页面中追加新的内容，多用于各种资讯类、电商类列表或首页中。

根据本发明实施方式的页面处理方案，适于在计算设备中执行。

图1示出了根据本发明的一个实施例的计算设备100的结构框图。

在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器(μp)、微控制器(μc)、数字信息处理器(dsp)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(alu)、浮点数单元(fpu)、数字信号处理核心(dsp核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如ram)、非易失性存储器(诸如rom、闪存等)或者它们的任何组合。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。在一些实施方式中，应用122可以布置为在操作系统120上由一个或多个处理器104利用程序数据124执行指令。应用122例如可以是浏览器、即时通信应用、相册等。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个a/v端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个i/o端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(rf)、微波、红外(ir)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

计算设备100可以实现为包括桌面计算机和笔记本计算机配置的个人计算机，也可以实现为服务器，例如文件服务器、数据库服务器、应用程序服务器和web服务器等。当然计算设备100还可以实现为小尺寸便携(或者移动)电子设备的一部分，这些电子设备可以是诸如蜂窝电话、个人数字助理(pda)、个人媒体播放器设备、无线网络浏览设备、个人头戴设备、应用专用设备、或者可以包括上面任何功能的混合设备。

在根据本发明的实现方式中，计算设备100被配置为执行根据本发明的页面处理方法。其中，计算设备100的一个或多个应用122中包括用于执行根据本发明的页面处理方法200的多条程序指令。

图2示出了根据本发明一个实施例的页面处理方法200的流程示意图。如图2所示，方法200始于步骤s210。

在步骤s210中，标记布置在页面上的待处理的第一元素，以使得该第一元素在页面中可以被javascript找到。通常，第一元素为处于页面顶端或底部的显示元素。当然，在一些页面是水平滚动的场景中，第一元素为处于页面最左侧或最右侧的显示元素。本发明的实施例对此不做限制。

随后在步骤s220中，按照显示效果，插入至少一个与第一元素相邻的第二元素。

如前文所述，显示效果可以按照用户对页面的拖动方向，分为垂直方向上的回弹显示、和水平方向上的回弹显示。若显示效果为垂直方向上的回弹显示，则插入两个与该第一元素在垂直方向上相邻的第二元素，即，在该第一元素的上下各插入一个第二元素。若显示效果为水平方向上的回弹显示，则插入两个与该第一元素在水平方向上相邻的第二元素，即，在该第一元素的左右各插入一个第二元素。

随后在步骤s230中，响应于用户对该第一元素的滑动触摸操作，确定触摸事件的值。

根据本发明的实施例，在执行步骤s230之前，会先为该第一元素设置滑动触摸事件。

其中，滑动触摸事件包括触摸开始事件(记作touchstart)、触摸滑动事件(记作touchmove)和触摸结束事件(记作touchend)。其中，touchstart表示检测到用户开始触摸(可选地，用户可以通过手指或触摸笔等在计算设备100的屏幕上进行触摸操作，本发明的实施例对此不做限制)，只在刚接触时触发一次，利用它可以记录下触摸的起始位置。touchmove表示检测到用户正在页面上滑动，这个事件会在触摸过程中被多次触发，利用它可以获取在页面上滑动的实时坐标。touchend表示检测到用户的触摸操作结束，它仅在触摸结束时被触发一次，利用它可以把第二元素的显示高度设置为0，用来让已经离开原有位置的页面还原。

基于此，在根据本发明的实施例中，确定触摸事件的值可以分3步执行。

(1)在用户开始触摸到第一元素时，响应于用户对该第一元素的触摸操作，记录触摸起始位置，作为触摸开始事件的值。

(2)在用户对该第一元素的滑动过程中，实时记录滑动位置，作为触摸滑动事件的值。

(3)在用户停止对该第一元素的触摸操作时，设置触摸结束事件的值。通常，触摸结束事件的值设置为0。

随后在步骤s240中，根据所设置的触摸事件的值，确定第二元素的显示值。

通常，第二元素的显示值为显示宽度的值或者显示高度的值。若显示效果为垂直方向上的回弹显示，则设置显示高度的值；若显示效果为水平方向上的回弹显示，则设置显示宽度的值。

在一种实施例中，分4个步骤来确定第二元素的显示值。

第一步，基于触摸开始事件的值和触摸滑动事件的值，确定出滑动距离和滑动方向。

若，记y2为触摸滑动事件的值，y1为触摸开始事件的值，那么，滑动距离就是d＝y2-y1。根据d的正负就可以确定出滑动方向。在一种实施例中，当d大于0时，确定滑动方向为垂直向下滑动或水平向右滑动；当d小于0时，确定滑动方向为垂直向上滑动或水平向左滑动。

第二步，基于滑动方向，确定待显示的第二元素。

在根据本发明的一种实施例中，当滑动方向为垂直向上滑动时，确定位于第一元素下方的第二元素为待显示的第二元素。当滑动方向为垂直向下滑动时，确定位于第一元素上方的第二元素为待显示的第二元素。当滑动方向为水平向左滑动时，确定位于第一元素右方的第二元素为待显示的第二元素。当滑动方向为水平向右滑动时，确定位于第一元素左方的第二元素为待显示的第二元素。

第三步，基于滑动距离，设置所确定的第二元素的显示高度或显示宽度。

基于前文所述，若滑动方向为垂直方向，则设置第二元素的显示高度；若滑动方向为水平方向，则设置第二元素的显示宽度。

在一种实施例中，按照如下公式来确定第二元素的显示高度或显示宽度：

y＝|y2-y1|/k，

式中，y表示显示高度或显示宽度，y2表示触摸滑动事件的值，y1表示触摸开始事件的值，k表示距离系数。通常k的取值为1。在一些实施场景中，当k＝1时，就是直接把滑动距离设置为第二元素的显示高度，这样会导致第二元素显示过高，不符合实际情况，此时，就需要系数k去适当减少滑动距离的值。在实际应用中可以根据实际情况设置k的值，本发明的实施例对此不做限制。

第四步，基于触摸结束事件的值，再次设置该第二元素的显示高度或显示宽度。通常，触摸结束事件的值设置为0。即，当滑动触摸结束时，让已经离开原有位置的页面还原。故，此处设置第二元素的显示高度或显示宽度为0。

在另一些实施例中，还可以设置第二元素的滑动属性，以达到页面平滑滚动的目的。例如，设置第二元素以某个速度，从当前的显示高度或显示宽度变为0，本发明的实施例对此不做限制。

以下示出根据本发明一个实施例的设置第一元素和第二元素、以及设置第一元素的滑动触摸事件的代码示例。其中，scroller表示第一元素，touchstart、touchmove和touchend分别表示滑动触摸事件。

根据本发明的实施例，在每次滑动触摸事件中，随着计算出的第二元素的显示值，就可以基于该显示值，生成页面的显示效果。

图3a-3d示出了根据本发明一个实施例的页面显示效果的示意图。如图3a-图3d示出的是“下拉刷新”场景中，页面的显示效果。图3a表示刚检测到触摸滑动操作时，页面显示的初始状态，图3b和图3c表示下拉过程中，页面的显示状态，其中，用斜线“/”填充部分表示所显示的第二元素的高度。图3d表示触摸滑动操作结束时，页面又回到初始状态。从图3a到图3d可以清晰看到，随着下拉滑动的距离增加，第二元素的显示高度也在同步增加。此时，第二元素的显示宽度为父元素的宽度，即页面的显示宽度。

图4a-图4d示出了根据本发明另一个实施例的页面显示效果的示意图。如图4a-图4d示出的是“上拉加载”场景中，页面的显示效果。图4a表示刚检测到触摸滑动操作时，页面显示的初始状态，图4b和图4c表示上拉过程中，页面的显示状态，其中，用斜线“/”填充部分表示所显示的第二元素的高度。图4d表示触摸滑动操作结束时，页面由回到初始状态。从左到右可以清晰看到，随着上拉滑动的距离增加，第二元素的显示高度也在同步增加。此时，第二元素的显示宽度为父元素的宽度，即页面的显示宽度。

基于上述描述，本领域技术人员应当了解，当页面支持水平方向的滑动触摸时，随着向左滑动的距离增加或者向右滑动的距离增加，第二元素的显示宽度也会增加，当触摸滑动操作结束时，第二元素的显示宽度为0，页面又回到初始状态，此处不再一一展开赘述。

根据本发明的页面处理方案，在浏览器默认的滚动功能上，实现了页面的回弹效果，其优势在于：需要更少的配置项，维护工作大大减少；基于浏览器的默认滚动功能，性能和兼容性可以得到保证；在所有的平台上均能实现统一的回弹效果；代码少，文件体积小，下载速度快。

应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如软盘、cd-rom、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明所述的方法。

以示例而非限制的方式，计算机可读介质包括计算机存储介质和通信介质。计算机可读介质包括计算机存储介质和通信介质。计算机存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。