一种用于应用程序页面上拉刷新的方法及设备

技术领域

本申请涉及计算机领域，尤其涉及一种用于应用程序页面上拉刷新的方法及设备。

背景技术

随着网络技术以及通信技术的快速发展，移动互联网业务迅猛增长。移动互联网具有信息丰富、使用便捷的特点，用户可以通过移动互联网来享受到大量丰富的资讯信息。

用户在通过应用程序浏览网络信息时，需要将终端进行联网，并在终端内加载页面资源文件、图片等数据。对于一些具有一定实时性的页面，例如社交应用、新闻资讯等应用程序，用户会经常频繁地刷新页面来及时看到最新的内容。当前应用程序页面刷新的技术是在底部一定区域的时候进行数据请求以及其他处理，在底部区域会频繁触发请求数据，如果滑动到最底部，触发次数为自身设定的距离底部的距离，非常耗性能。比如：当接收到用户应用程序发出的页面刷新操作，终端会立刻向服务器请求最新数据，并在得到最新的数据后也会立即解析数据并进行页面刷新。但是如果用户使用应用程序滑动到页面底部时，才发出页面刷新操作指令，虽然也立刻向服务器请求最新数据，以及在得到最新数据后也会立刻解析数据并进行页面刷新，但是实时的数据刷新处理还是会有所延迟，同时实时且频繁的数据刷新处理流程会造成页面刷新不及时，在进行页面刷新过程中出现卡顿现象，用户的使用体验不好。

发明内容

本申请的一个目的是提供一种用于应用程序页面上拉刷新的方法及设备，解决现有技术中频繁触发页面刷新操作导致页面刷新缓慢和卡顿的问题，优化应用程序页面上拉刷新的效果，提升用户体验。

根据本申请的一个方面，提供了一种应用程序页面上拉刷新的方法，该方法包括：

监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度；

从系统内存中读取已存储的所述内容列表的可视高度和实际高度；

设定页面加载触发变量和触底判定变量；

基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，将加载到的刷新后的数据更新到内容列表中。

进一步地，所述监听用户对应用程序页面上内容列表的滑动操作，包括：

设定滚动事件，将所述滚动事件与用户对应用程序页面上内容列表的滑动操作进行绑定，当滑动每一像素帧时，触发所述滚动事件以对所述滑动操作进行监听。

进一步地，所述获取所述内容列表的滚动高度，包括：

在所述滚动事件中获取所述内容列表的滚动高度，其中，所述滚动高度表示所述内容列表的滚动条距离所述应用程序所在屏幕的顶部的像素数量值。

进一步地，所述从系统内存中读取已存储的所述内容列表的可视高度和实际高度，包括：

获取应用程序页面上的内容列表元素以及所述内容列表的可视高度和实际高度，将所述可视高度和所述实际高度存储在系统内存中；

进一步地，所述获取应用程序页面上的内容列表元素以及所述内容列表的可视高度和实际高度，包括：

确定应用程序页面对应的HTML的容器；

根据所述HTML的容器的相关属性获取应用程序页面上的展示模块；

从所述展示模块中获取所述内容列表元素以及可视高度和实际高度。

进一步地，所述设定页面加载触发变量和触底判定变量，所述方法包括：

设定页面加载触发变量以及页面加载触发时的指定高度；

设定所述滑动操作对应的触底判定变量。

进一步地，所述基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，包括：

当所述页面加载触发变量的数值达到所述指定高度后，将所述滚动高度、所述可视高度以及所述指定高度之和与所述实际高度进行比较，得到第一比较结果；

根据所述第一比较结果及所述触底判定变量向网络发送加载页面刷新请求。

进一步地，所述第一比较结果及所述触底判定变量向网络发送加载页面刷新请求，包括：

当所述第一比较结果为所述滚动高度、所述可视高度以及所述指定高度之和小于所述实际高度时，继续监听用户的滑动操作；

当所述第一比较结果为所述滚动高度、所述可视高度以及所述指定高度之和大于等于所述实际高度时，则判断所述触底判定变量是否表示已触过底，若是，则将所述触底判定变量设置为相反值，若否，则将所述触底判定变量设置为相同值，并向网络发送加载页面刷新请求。

根据本申请又一个方面，还提供了一种应用程序页面上拉刷新的设备，所述设备包括监听装置、读取装置、设定装置和刷新装置；

所述监听装置，用于监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度；

所述读取装置，用于从系统内存中读取已存储的所述内容列表的可视高度和实际高度；

所述设定装置，用于设定页面加载触发变量和触底判定变量；

所述刷新装置，用于基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，将加载到的刷新后的数据更新到内容列表中。

根据本申请又一个方面，还提供了一种应用程序页面上拉刷新的设备，所述设备包括：

一个或多个处理器；以及

存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述所述方法的操作。

根据本申请再一个方面，还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如前述所述的方法。

与现有技术相比，本申请实施例提供了一种用于APP页面上拉刷新的方法及设备，通过监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度，再从系统内存中读取已存储的所述内容列表的可视高度和实际高度，基于设定的页面加载触发变量和触底判定变量，结合所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量的判断向网络发送加载页面刷新请求，将加载页面刷新请求刷新后的数据更新到内容列表中，满足应用程序页面上拉刷新，避免因频繁触发页面刷新操作导致页面刷新缓慢和卡顿的问题，优化应用程序页面上拉刷新的效果，提升用户体验。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出根据本申请的一个方面提供的一种的应用程序页面上拉刷新方法流程示意图；

图2示出根据本申请一实施例中一种应用程序页面上拉刷新性能优化的流程图；

图3是根据本申请的一个方面提供的一种应用程序页面上拉刷新的设备的结构示意图。

具体实施方式

下面结合附图对本申请作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(例如中央处理器(Central Processing Unit，CPU))、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RandomAccess Memory，RAM)和/或非易失性内存等形式，如只读存储器(Read Only Memory，ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(Phase-Change RAM，PRAM)、静态随机存取存储器(Static Random Access Memory，SRAM)、动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、数字多功能光盘(Digital Versatile Disk，DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

本实施例提供了一种应用程序页面上拉刷新的方法，可用于应用程序页面刷新，图1是本申请实施例的一种应用程序页面上拉刷新的的方法的流程图，如图1所示，该方法包括：步骤S11～步骤S14，其中，

步骤S11，监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度；在此，移动终端上的应用程序(APP)为用户提供社交应用、新闻资讯等，按照功能，每一APP的页面上展示不同的内容列表，可供用户进行滑动操作，当用户对某一APP上的内容列表进行滑动操作时，该滑动操作比如为上拉列表的滚动条或下拉滚动条等，监听该用户行为以获取到当前页面上内容列表的滚动高度。其中，内容列表的滚动高度为列表的下滑距离，即用户滑动操作时页面的下滑距离，在进行页面刷新时，需要先获取用户进行滑动操作的滑动距离。

步骤S12，从系统内存中读取已存储的所述内容列表的可视高度和实际高度；在此，系统内存为应用程序(APP)所在的移动终端的系统内存，系统内存中存储有关该APP的一些相关信息，比如该APP的页面内容列表的一些高度信息，可以从该系统内存中读取出已存储的所述可视高度和实际高度。其中，可以获取应用程序页面上的内容列表元素以及所述内容列表的可视高度和实际高度，将所述可视高度和所述实际高度存储在系统内存中，即，可以根据网页应用程序接口(web API)获取到该应用程序的页面中相对应的内容列表元素，并获取到相对应的可视高度和实际高度，从而为页面加载触发变量的判定提供数据来源；其中，内容列表元素为应用程序的功能所确定的列表元素，比如APP为购物类，则内容列表元素为商品列表元素。在现有的页面上拉刷新方案中，每一次刷新请求都需要获取可视高度和所述实际高度这两个参数，请求接口次数较多，而在本申请中只需要获取一次后将其进行存储，减少了重复请求接口的次数。

步骤S13，设定页面加载触发变量和触底判定变量；其中，页面加载触发变量是用来指定距离应用程序所在的屏幕底部多少高度的时候进行加载下一页数据，可以在具体实际应用中经过一些页面列表对应高度的参数比较过后得到的结果变量，比如A+B>C，将比较结果赋予页面加载触发变量；所述触底判断变量是用来表示用户是否已经触发屏幕到到底了，是根据具体页面而设定的。

步骤S14，基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，将加载到的刷新后的数据更新到内容列表中；在此，所述变量满足判断条件时，即可请求页面数据刷新更新到内容列表中。在本申请中，通过监听用户滑动操作，获取所述内容列表的滚动高度，结合列表的可视高度和实际高度，进行页面加载触发变量和触底判断变量的判断，满足判断条件时，在距离商品列表容器的底部上方有一定的距离就进行了异步获取数据并加载到页面上，结合使用变量的控制，防止刚到底部触发事件的位置多次进行数据接口的请求问题，使用户感觉不到有请求数据或者页面卡顿加载的痕迹，优化页面刷新效率。

在本申请一实施例中，在步骤S11中，根据监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度，在此，对滚动高度的获取，需先设定滚动事件，将所述滚动事件与用户对应用程序页面上内容列表的滑动操作进行绑定，当滑动每一像素帧时，触发所述滚动事件以对滑动操作进行监听。在此，实现监听的监听事件是监听用户手按下屏幕、向上滑动继而松开屏幕期间所发生的事，即程序需要做的事。比如：用户滑动一段距离，那这段距离到底是滑了多少，为了准确的拿到这个距离，就会每滑动1px像素该方法都会执行一次滚动事件，满足到底部的条件就触发请求更多的数据，然后加载到页面上来，如果不满足条件，那就肯定还没到底部，那就接着滑动。所述滚动高度表示所述内容列表的滚动条距离所述应用程序所在屏幕的顶部的像素数量值，即向下滑动页面距离。手机容器上的展示内容需要滚动才能查看全部内容，比如所知所有电商页面，小程序页面，APP首页等在手机容器上的展示内容一个屏幕的物理高度肯定是展示不了商家想对用户展示的内容，那么只有向下滑动页面，这里滑动的距离就是滚动高度。其中，滚动事件是通过e.target.scrollTop获取滚动高度，表示滚动条距离顶部的px(像素)。在此，一个元素的scrollTop值是这个元素的内容顶部(卷起来的)到它的视口可见内容的顶部的距离的度量，当一个元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0。scrollTop也是属于Web Api的属性，所有的APP首页、小程序门户首页刚加载完成的时候这个scrollTop为0，即为距离移动终端容器顶部的距离有多少。当用户进行每次滑动操作时，操作步骤为：按下→滑动→松开，期间会触发N++次的计算，就是实时获取滑动的高度，也就是距离屏幕顶部的高度，也就是scrollTop所获取的值。

在本申请的一实施例中，在步骤S12中，首先是获取应用程序页面上的内容列表元素以及所述内容列表的可视高度和实际高度，将其存储于系统内存中，便于直接读取存储的数据，其中，所述可视高度(offsetHeight)是移动终端(比如手机)屏幕所能看到的区域，也就是手机的物理高度，通过DOM(HTM的容器)的offsetHeight属性获得，表示区域固定的高度，也可以通过getBoundingClientRect()来获取高度，本申请使用getBoundingClientRect()来获取高度，因为使用前者会引起浏览器回流，造成一些性能问题；在此，getBoundingClientRect()表示返回元素的大小及相对于可视区域的位置，获取列表的实例。比如：一个电商APP首页上面会有很多很多的模块，有顶部导航栏，浮动弹层，促销商品列表，悬浮广告等等，为了提高手机APP内容的加载速度，往往商品列表只会加载大于手机的物理高度的商品，一般也就是10条商品，多余的并不会加载，因为加载过程会损耗性能。那么，当用户滑动列表并即将滑动到底部的时候，程序就需要去加载更多的商品出来展示，getBoundingClientRect()就是获取APP首页里面任意一个模块(比如浮动弹层、商品列表、悬浮广告等等)的位置和元素的大小。所述实际高度(scrollHeight)是APP页面展示所有内容叠加在一起的高度，即表示区域内所有内容的高度，通过容器(DOM)的scrollHeight获得。在此，DOM是所有网页呈现给用户的媒介，每个页面会有很多种元素，为了准确的拿到特定模块的不同属性，需要通过DOM存储页面内容，即页面内容放置于DOM上，比如商品的展示、热点新闻的展示、广告的弹层、微博内容以及点赞等等都会放在DOM上，页面能够支持并解析的为HTML，DOM等同于HTML网页，HTML在进行网络传输的时候会被编译和压缩为网络编码进行传输。而实际高度的获取是先拿到一个模块(比如是应用程序上的商品模块)，才能根据WEB特有的API去获取到实际高度(scrollHeight)。即首先确定应用程序页面对应的HTML的容器(DOM)，并根据所述HTML的容器的相关属性获取应用程序页面上的展示模块，从所述展示模块中获取所述内容列表元素以及可视高度和实际高度。

在本申请一实施例中，在步骤S13中，所述页面加载触发变量经过可视高度、滑动距离和指定高度的和与实际高度比较的结果得出，并设定页面加载触发时的指定高度，所述触底判断变量用来表示用户是否到达过底部，起始给一个默认值false，表示没有到底过。

进一步地，在S14步骤中，基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，即当所述页面加载触发变量的数值达到所述指定高度后，将所述滚动高度、所述可视高度以及所述指定高度之和与所述实际高度进行比较，得到第一比较结果；其中，当第一比较结果为所述滚动高度、所述可视高度以及所述指定高度之和小于所述实际高度时，继续监听用户的滑动操作；当所述第一比较结果为所述滚动高度、所述可视高度以及所述指定高度之和大于等于所述实际高度时，则判断所述触底判定变量是否表示已触过底，若是，则将所述触底判定变量设置为相反值，若否，则将所述触底判定变量设置为相同值，并向网络发送加载页面刷新请求。可以理解的是：在程序上增加一个变量来指定距离底部多少高度的时候进行加载下一页数据，等同于滑动页面快到底部的时候就会触发，其中，指定高度是一个可变值，比如在本申请实施例中封装是100像素时，100px有视觉上3-5厘米的高度，该方法的封装是给了一个默认的值，适用于所有的页面。若不想距离底部加载数据，则可以给这个变量设置为300、400、500等等，但有一个前提是不能超过当前手机的物理高度；在此可以根据页面的实际情况来动态改变这个数值，即支持属性或者参数的传入。同时，还是以上述距离底部100px为例，用户一直在向下滑动，那么这个100px会呈递减状态直到0px，小于100px表明已经触底了，触底以后不做任何请求数据，直接结束。当用户在从100px滑动到90px时，将触底变量设置为“是”，用于表示用户已经滑动到底部了，则用户又从距离底部90px向上滑动，滑动了30px，也就是距离底部90+30＝120px，此时并不满足触底条件，并且此时的触底变量是已经触底过，所以要加一个反向设置：将触底变量设置为“否”，其中判断的条件为：可视高度、滚动距离和指定的高度的和小于实际高度的时候，且已经触发过一次到底请求数据的操作，需要将触底变量给设置为“否”，重置到初始状态，表示用户向上滑动了。与现有的触发机制相比，本申请是滑动到底部才触发，避免滑动到底部指定高度的时候引发的多次触发。本申请通过刷新条件的判断，提前实现数据刷新，进而异步获取页面数据并加载到展示页面上，使用户的观感更加流畅，察觉不到卡顿加载的痕迹。加快了数据的获取速度，适应多种应用程序页面数据的获取。

在本申请一实施例中，如图2所示，该上拉加载优化的方法包括：利用JavaScript获取距离底部高度，可视高度，滚动距离，指定高度，触底变量和实际高度，其中，实际高度和可视高度是固定值，不需要重复获取；监视手动下滑动作，判断是否滑动到底部，滑动到指定高度触发底部刷新数据的触底条件判断；比较可视高度+滑动距离+指定高度与实际高度大小，查询触底变量值的真假，若可视高度+滑动距离+指定高度小于实际高度，继续滑动。可视高度+滑动距离+指定高度大于实际高度，判断是否触底，改变触底变量的值，若已经触底，触底变量为true，满足可视高度+滑动距离+指定高度小于实际高度并且已经触底，将触底变量变为false，结束加载；若可视高度+滑动距离+指定高度大于实际高度，且没有触底，将触底变量设置为为true，请求网络加载下一页数据，将数据更新到列表展示，APP页面刷新，结束加载。

此外，本申请实施例还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现前述一种应用程序页面上拉刷新的方法。

与上文所述的方法相对应的，本申请还提供一种终端，其包括能够执行上述图1、图2、图3或各个实施例所述的方法步骤的模块或单元，这些模块或单元可以通过硬件、软件或软硬结合的方式来实现，本申请并不限定。

例如，在本申请一实施例中，还提供了一种应用程序页面上拉刷新的设备，所述设备包括：

一个或多个处理器；以及

存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述所述方法的操作。

例如，计算机可读指令在被执行时使用所述一个或多个处理器：

监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度；

从系统内存中读取已存储的所述内容列表的可视高度和实际高度；

设定页面加载触发变量和触底判定变量；

基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，将加载到的刷新后的数据更新到内容列表中。

图3示出本申请又一个方面提供的一种应用程序页面上拉刷新的设备的结构示意图，所述设备包括：监听装置11、读取装置12、设定装置13及刷新装置14，其中，监听装置11用于监听用户对应用程序页面上内容列表的滑动操作，获取所述内容列表的滚动高度；读取装置12用于从系统内存中读取已存储的所述内容列表的可视高度和实际高度；设定装置13用于设定页面加载触发变量和触底判定变量；刷新装置14用于基于所述滚动高度、所述可视高度、所述实际高度以及页面加载触发变量和触底判定变量向网络发送加载页面刷新请求，将加载到的刷新后的数据更新到内容列表中。

需要说明的是，监听装置11、读取装置12、设定装置13和刷新装置14执行的内容分别与上述步骤S11、S12、S13和S14中的内容相同或相应相同，为简明起见，在此不再赘述。

需要说明的是，本申请所述的方法通过设备执行，所述设备包括移动终端设备。其中，移动终端设备包括能够与设备建立网络连接的设备，例如，包括但不限于任何移动终端，如计算机、智能手机、平板电脑等，所述移动电子产品可以采用任意操作系统，如android操作系统、iOS操作系统等。

在此，所述设备为移动终端设备仅为举例，其他现有的或者今后可能出现的设备如适用于本申请也应包含在本申请的保护范围内，在此，以引用的方式包含于此。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。