[发明专利]实现网页长列表无限滚动的方法及系统

说明书

本申请公开了一种实现网页长列表无限滚动的方法及系统，方法包括：初始化步骤：设置获取数据用的探针，设置初始的上边界节点距离顶部的高度，设置初始的下边界节点距离底部的高度，根据所述高度通过所述探针获得数据列表；数据获取步骤：从所述数据列表中获取至少一条数据；数据渲染步骤：将获取到的所述数据渲染到页面中指定的可视区域内；判断步骤：判断所述可视区域内是否包含可以移除的已渲染节点并删除可以移除的已渲染节点；更新步骤：更新所述上边界节点距离顶部的高度及所述下边界节点距离底部的高度。本发明的优点是，保证数据连贯性，提升用户体验。

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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