实现网页长列表无限滚动的方法及系统

技术领域

本发明属于实现网页长列表无限滚动的方法领域，具体涉及一种实现网页长列表无限滚动的方法及系统。

背景技术

现有的无限滚动加载方案中，只会向网页可视区域内不断添加内容，而不会动态删除已经移出可视区域的内容，导致随着用户不断滑动加载内容，网页中会堆叠大量节点，提升内存使用率，影响网页性能。由此可见，现有技术存在节点堆叠导致性能变差的情况，同时也导致了内存使用率高。

发明内容

本申请实施例提供了一种实现网页长列表无限滚动的方法及系统，以至少解决了现有网页节点堆叠导致性能差，内存使用率高的问题。

本发明提供了一种实现网页长列表无限滚动的方法，其中，包括：

初始化步骤：设置获取数据用的探针，设置初始的上边界节点距离顶部的高度，设置初始的下边界节点距离底部的高度，根据所述高度通过所述探针获得数据列表；

数据获取步骤：从所述数据列表中获取至少一条数据；

数据渲染步骤：将获取到的所述数据渲染到页面中指定的可视区域内；

判断步骤：判断所述可视区域内是否包含可以移除的已渲染节点并删除可以移除的已渲染节点；

更新步骤：更新所述上边界节点距离顶部的高度及所述下边界节点距离底部的高度。

上述方法，其中，所述数据获取步骤包括：判断所述数据列表中是否包含符合条件的数据，若判断结果为否，则从服务端获取数据并填充到所述数据列表中，再则从所述数据列表中获取符合条件的至少一条数据，若判断结果为是，则从所述数据列表中直接获取符合条件的至少一条数据。

上述方法，其中，所述数据获取步骤还包括：如果是上滑操作或者初始化操作，设定此时结束探针为X，则获取数组中第X+1到第X+N的数据，并修改结束探针为X+N；如果是下滑操作，设定此时开始探针为X，则获取数组中第X-N到第X-1的数据，并修改开始探针为X-N。

上述方法，其中，所述数据渲染步骤包括：如果为上滑操作，则将获取的数据渲染到当前所述可视区域的底部；如果为下滑操作，则将获取的数据渲染到当前所述可视区域的顶部。

上述方法，其中，所述判断步骤包括：

选择步骤：如果为上滑操作，则选择最先渲染到所述可视区域内的已渲染节点是否可以被移除；如果为下滑操作，则选择最晚渲染到所述可视区域内的已渲染节点是否可以被移除；

移除步骤：如果是移除最先渲染到所述可视区域的已渲染节点，则根据移除节点的列表项数量修改开始探针；如果是移除最晚渲染到所述可视区域的已渲染节点，则根据移除节点的列表项数量修改结束探针。

上述方法，其中，所述更新步骤包括：

上滑操作更新步骤：根据当前所述下边界节点距离底部的高度及最后渲染的已渲染节点的高度设置所述下边界节点距离底部的高度，根据当前所述上边界节点距离顶部的高度及移除的已渲染节点的高度设置所述上边界节点距离顶部的高度；

下滑操作更新步骤：根据当前所述上边界节点距离顶部的高度及最后渲染的已渲染节点的高度设置所述上边界节点距离顶部的高度；根据当前所述下边界节点距离底部的高度及移除的已渲染节点的高度设置所述下边界节点距离底部的高度。

上述方法，其中，所述移除步骤中，如果是移除最先渲染到所述可视区域的所述已渲染节点，则修改所述开始探针为当前所述开始探针与移除节点的列表项数量之差；如果是移除最晚渲染到所述可视区域的所述已渲染节点，则修改所述结束探针为当前所述结束探针与移除节点的列表项数量之差。

上述方法，其中，所述上滑操作更新步骤中，设置所述下边界节点距离底部的高度为HX1-HY1，HX1为当前所述下边界节点距离底部的高度，HY1为最后渲染的已渲染节点的高度，设置所述上边界节点距离顶部的高度HX2+HY2，HX2当前所述上边界节点距离顶部的高度，HY2为移除的已渲染节点的高度。

上述方法，其中，所述下滑操作更新步骤中，设置所述上边界节点距离顶部的高度HX3-HY3，HX3为当前所述上边界节点距离顶部的高度，HY3为最后渲染的已渲染节点的高度；设置所述下边界节点距离底部的高度HX4+HY4，HX4为当前所述下边界节点距离底部的高度，HY4为移除的已渲染节点的高度。

本发明还包括一种实现网页长列表无限滚动的装置，其中，应用上述任一项所述的方法，所述装置包括：

初始化单元：设置获取数据用的探针，设置初始的上边界节点距离顶部的高度，设置初始的下边界节点距离底部的高度，根据所述高度通过所述探针获得数据列表；

数据获取单元：从所述数据列表中获取至少一条数据；

数据渲染单元：将获取到的所述数据渲染到页面中指定的可视区域内；

判断单元：判断所述可视区域内是否包含可以移除的已渲染节点并删除可以移除的已渲染节点；

更新单元：更新所述上边界节点距离顶部的高度及所述下边界节点距离底部的高度。

本发明的实现网页长列表无限滚动的方法的有益效果：

1.替代分页展示长列表的方案，保证数据连贯性，提升用户体验。

2.动态移除已经移出可视区域的节点，提高系统流畅度，降低性能开销。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。

在附图中：

图1是实现网页长列表无限滚动的方法的流程图；

图2是图1中步骤S4的分步骤流程图；

图3是图1中步骤S5的分步骤流程图；

图4是本发明的实现网页长列表无限滚动的系统的结构示意图；

图5是根据本发明实施例的计算机设备的框架图；

图6是实现网页长列表无限滚动的方法的应用流程图；

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

下面结合附图所示的各实施方式对本发明进行详细说明，但应当说明的是，这些实施方式并非对本发明的限制，本领域普通技术人员根据这些实施方式所作的功能、方法、或者结构上的等效变换或替代，均属于本发明的保护范围之内。

在详细阐述本发明各个实施例之前，对本发明的核心发明思想予以概述，并通过下述若干实施例予以详细阐述。

请参照图1，图1是实现网页长列表无限滚动的方法的流程图。如图1所示，本发明的实现网页长列表无限滚动的方法包括：

初始化步骤S1：设置获取数据用的探针，设置初始的上边界节点距离顶部的高度，设置初始的下边界节点距离底部的高度，根据所述高度通过所述探针获得数据列表；

数据获取步骤S2：从所述数据列表中获取至少一条数据；

数据渲染步骤S3：将获取到的所述数据渲染到页面中指定的可视区域内；

判断步骤S4：判断所述可视区域内是否包含可以移除的已渲染节点并删除可以移除的已渲染节点；

更新步骤S5：更新所述上边界节点距离顶部的高度及所述下边界节点距离底部的高度。

其中，所述数据获取步骤包括：判断所述数据列表中是否包含符合条件的数据，若判断结果为否，则从服务端获取数据并填充到所述数据列表中，再则从所述数据列表中获取符合条件的至少一条数据，若判断结果为是，则从所述数据列表中直接获取符合条件的至少一条数据。

进一步地，所述数据获取步骤还包括：如果是上滑操作或者初始化操作，设定此时结束探针为X，则获取数组中第X+1到第X+N的数据，并修改结束探针为X+N；如果是下滑操作，设定此时开始探针为X，则获取数组中第X-N到第X-1的数据，并修改开始探针为X-N。

再进一步地，所述数据渲染步骤包括：如果为上滑操作，则将获取的数据渲染到当前所述可视区域的底部；如果为下滑操作，则将获取的数据渲染到当前所述可视区域的顶部。

请参照图2，图2是图1中步骤S4的分步骤流程图。如图2所示，所述判断步骤S4包括：

选择步骤S41：如果为上滑操作，则选择最先渲染到所述可视区域内的已渲染节点是否可以被移除；如果为下滑操作，则选择最晚渲染到所述可视区域内的已渲染节点是否可以被移除；

移除步骤S42：如果是移除最先渲染到所述可视区域的已渲染节点，则根据移除节点的列表项数量修改开始探针；如果是移除最晚渲染到所述可视区域的已渲染节点，则根据移除节点的列表项数量修改结束探针。

请参照图3，图3是图1中步骤S5的分步骤流程图。如图2所示，所述更新步骤S5包括：

上滑操作更新步骤S51：根据当前所述下边界节点距离底部的高度及最后渲染的已渲染节点的高度设置所述下边界节点距离底部的高度，根据当前所述上边界节点距离顶部的高度及移除的已渲染节点的高度设置所述上边界节点距离顶部的高度；

下滑操作更新步骤S52：根据当前所述上边界节点距离顶部的高度及最后渲染的已渲染节点的高度设置所述上边界节点距离顶部的高度；根据当前所述下边界节点距离底部的高度及移除的已渲染节点的高度设置所述下边界节点距离底部的高度。

其中，所述移除步骤中，如果是移除最先渲染到所述可视区域的所述已渲染节点，则修改所述开始探针为当前所述开始探针与移除节点的列表项数量之差；如果是移除最晚渲染到所述可视区域的所述已渲染节点，则修改所述结束探针为当前所述结束探针与移除节点的列表项数量之差。

其中，所述上滑操作更新步骤中，设置所述下边界节点距离底部的高度为HX1-HY1，HX1为当前所述下边界节点距离底部的高度，HY1为最后渲染的已渲染节点的高度，设置所述上边界节点距离顶部的高度HX2+HY2，HX2当前所述上边界节点距离顶部的高度，HY2为移除的已渲染节点的高度。

其中，所述下滑操作更新步骤中，设置所述上边界节点距离顶部的高度HX3-HY3，HX3为当前所述上边界节点距离顶部的高度，HY3为最后渲染的已渲染节点的高度；设置所述下边界节点距离底部的高度HX4+HY4，HX4为当前所述下边界节点距离底部的高度，HY4为移除的已渲染节点的高度。

以下，列举实施例具体说明本发明的实现网页长列表无限滚动的方法如下。

实施例一：

本实例揭示了实现网页长列表无限滚动的方法(以下简称“方法”)的具体实施方式。

如图6所示，本发明的方法在实施中包括如下步骤：

1.页面初始化，包括：设置获取数据用的开始探针为0，设置上边界节点距离顶部的高度为0，设置下边界节点距离底部的高度为0。

2.查看数据列表中是否包含符合条件的N条数据，如果包含，则执行第5步，否则执行第3步。

3.从服务端获取一定数量的数据。

4.将获取到的数据以追加的方式填充到数据列表中。

5.从数据列表中获取符合条件的N条数据，此时存在两种情况：

a)如果是上滑操作或者初始化，假定此时结束探针为X，那么就获取数组中第X+1到第X+N的数据，并修改结束探针为X+N。

b)如果是下滑操作，假定此时开始探针为X，那么就获取数组中第X-N到第X-1的数据，并修改开始探针为X-N。

6.将获取到的N条数据渲染到网页中指定的可视区域内，此时包含两种情况：

a)如果是上滑操作，将N条数据渲染到当前可视区域的底部。

b)如果是下滑操作，将N条数据渲染到当前可视区域的顶部。

7.判断可视区域内是否包含可以移除的已渲染节点，此时存在两种情况：

a)如果是上滑操作，就判断最先渲染到可视区域内的一批节点是否可以被移除。

b)如果是下滑操作，就判断最晚渲染到可视区域内的一批节点是否可以被移除。

如果有执行第8步，否则执行第9步。

8.获取需要移除的已渲染节点并移除，此时需要针对两种情况更新开始探针。

a)如果是移除最先渲染到可视区域的一批节点，假定此时开始探针为X，移除节点的列表项数量为Y，修改开始探针为X-Y。

b)如果是移除最晚渲染到可视区域的一批节点，假定此时结束痰症为X，移除节点的列表项数量为Y，修改开始探针为X-Y。

9.更新上、下边界节点，此时包含两种情况：

如果是上滑操作：

a-1)如果此时下边界节点距离底部高度不为0，假定距离底部高度为HX，最后渲染的一批已渲染节点的高度为HY，那么设置下边界节点距离底部的高度为(HX-HY)。

a-2)如果前一步进行了移除操作，假定此时上边界节点距离顶部的高度为HX，移除的已渲染节点高度为HY，那么设置上边界节点距离顶部的高度为(HX+HY)。

如果是下滑操作：

b-1)如果此时上边界节点距离顶部高度不为0，假定距离顶部高度为HX，最后渲染的一批已渲染节点的高度为HY，那么设置上边界节点距离顶部的高度为(HX-HY)。

b-2)如果前一步进行了移除操作，假定此时下边界节点距离底部的高度为HX，移除的已渲染节点高度为HY，那么设置下边界节点距离底部的高度为(HX+HY)。

10.等待用户操作，当用户滑动页面导致上下边界进入可视区域后(上边界进入可视区域表示当前用户正在进行下滑操作，下边界进入可视区域表示当前用户正在进行上滑操作)，再次执行第2步。

实施例二：

请参照图4，图4是本发明的实现网页长列表无限滚动的系统示意图。如图3所示本发明的一种实现网页长列表无限滚动的系统，其中，包括：

初始化单元：设置获取数据用的探针，设置初始的上边界节点距离顶部的高度，设置初始的下边界节点距离底部的高度，根据所述高度通过所述探针获得数据列表；

数据获取单元：从所述数据列表中获取至少一条数据；

数据渲染单元：将获取到的所述数据渲染到页面中指定的可视区域内；

判断单元：判断所述可视区域内是否包含可以移除的已渲染节点并删除可以移除的已渲染节点；

更新单元：更新所述上边界节点距离顶部的高度及所述下边界节点距离底部的高度。

实施例三：

结合图5所示，本实施例揭示了一种计算机设备的一种具体实施方式。计算机设备可以包括处理器81以及存储有计算机程序指令的存储器82。

具体地，上述处理器81可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器82可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器82可包括硬盘驱动器(Hard DiskDrive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器82可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器82可在数据处理装置的内部或外部。在特定实施例中，存储器82是非易失性(Non-Volatile)存储器。在特定实施例中，存储器82包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-OnlyMemory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器82可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器81所执行的可能的计算机程序指令。

处理器81通过读取并执行存储器82中存储的计算机程序指令，以实现上述实施例中的任意一种实现网页长列表无限滚动的方法。

在其中一些实施例中，计算机设备还可包括通信接口83和总线80。其中，如图5所示，处理器81、存储器82、通信接口83通过总线80连接并完成相互间的通信。

通信接口83用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信端口83还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线80包括硬件、软件或两者，将计算机设备的部件彼此耦接在一起。总线80包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(Control Bus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线80可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(Front Side Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线80可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

该计算机设备可以实现网页长列表无限滚动，从而实现结合图1-图3描述的方法。

另外，结合上述实施例中实现网页长列表无限滚动的方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种实现网页长列表无限滚动的方法。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

综上所述，基于本发明的有益效果在于，本专利提供了一种实现网页长列表无限滚动的方法，本发明的优点替代分页展示长列表的方案，保证数据连贯性，提升用户体验；动态移除已经移出可视区域的节点，提高系统流畅度，降低性能开销。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。