网页中，列表数据的分页加载、自动加载

BDEEFE 发布于2019-08-20 11:14 / 1539人阅读

摘要：简单说明实际开发中，当数据量很大时，分页分段加载是必要的，不能一次性加载所有数据。分页加载分页加载时，需要额外维护几条相关数据当前页数标志是否还有，另外，可选择性添加字段，用于表示数据正在加载。

1 简单说明

实际开发中，当数据量很大时，分页(分段)加载是必要的，不能一次性加载所有数据。同时，当用户浏览到页面底部时，自动加载下一段数据并展示，可以增快新页面内容展现速度，提升用户体验。

2 分页加载

分页加载时，需要额外维护几条相关数据：offsetPage(当前页数)、hasNext(标志是否还有)，另外，可选择性添加fetching字段，用于表示数据正在加载。

data Model 的简易格式设计如下:

{
    list: [],
    hasNext: 1,
    offsetPage: 0,
    fetching:true
}

(ps: 服务端需要提供支持分段获取数据的API，比如可以通过设置limit, offset参数来指定数据区间)

分页加载大体流程为：

根据offsetPage以及预定义好的「每次加载数据条数limit」，设置分段加载的参数

异步加载数据时，先将fetching属性置为true，用于显示loading效果

数据获取完成后，将结果拼接到list数组后面，同时将fetching置为false、offsetPage++

3 自动加载

分段加载的思路很简单，下面说说自动加载的一种实现方式，先上实际开发项目中的截图。
滚动到「接近列表底部」时，可以看到「加载更多」字样，

当继续滚动页面到达底部时，则触发自动加载：

不难看出这里的实现思路就是「监听DOM的Scroll事件，当滚动到底部或者很接近的时候，触发下一页数据的加载」
具体到coding层面的实现，则需要先了解DOM元素的几个属性：scrollHeight、clientHeight、scrollTop等：

scrollHeight：容器元素中全部内容的高度(包括padding)

clientHeight：容器元素的可视区域(注意，这里不一定是浏览器窗口的高度)

借网上的图说明一下：

scrollTop: 滚动位置距离顶部的高度，当尚未滚动时，该值为0.

通过上诉三个值，即可计算出是否已经滚动到容器元素的底部位置了，伪代码示意如下：

scrollEventListener(){
    let container = getContainerElement();
    if(container.scrollHeight - container.clientHeight - container.scrollTop < [一个较小的值]){
         //加载下一页
         //getNextPageData()
    }
}

4 小tips:

绑定Scroll事件时，先要确定Container Element, 也就是确定想要哪个容器元素有滚动条，这在DOM层级比较深的时候，容易混淆。一个容易犯的错误是没有给目标Container Element指定overflow样式的值，导致滚动条实际是父元素的，从而无法触发Scroll事件。

自动加载的页数可以视情况做出限制，比如设置为只自动加载前10页，再往后就需要手动点击「加载更多」。

云服务器 GPU云服务器分页加载更多数据显示 js 分页异步加载数据 js分页实现数据加载数据数据加载中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80465.html

网页中，列表数据的分页加载、自动加载

摘要：简单说明实际开发中，当数据量很大时，分页分段加载是必要的，不能一次性加载所有数据。分页加载分页加载时，需要额外维护几条相关数据当前页数标志是否还有，另外，可选择性添加字段，用于表示数据正在加载。 1 简单说明实际开发中，当数据量很大时，分页(分段)加载是必要的，不能一次性加载所有数据。同时，当用户浏览到页面底部时，自动加载下一段数据并展示，可以增快新页面内容展现速度，提升用户体验。...

snifes 2019-08-01 15:45 评论0 收藏0
每日 30 秒 ⏱ 判断是否为页面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 简介分页、优化、可视区域、无限加载写前端页面时最经常遇到的开发需求之一就是渲染后端数据返回的数据对象，当数据对象数量极多的时候便需要进行分页。常见的分页方式有三种：在页面底部生成上一页、下一页、页面列表按钮。用户可以很直接的选择...

callmewhy 2019-08-26 13:36 评论0 收藏0
小程序分页实践：编写可复用分页组件

摘要：项目中遇到切换列表，每个都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。组件的复用完成了以上组件，在对其他分页的页面，可以直接复用。项目中遇到 tab切换列表，每个tab都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。组件的应用已写成一个小demo，效果如下图所示（数据用mock模拟）： showImg(https://segment...

crelaber 2019-08-26 10:11 评论0 收藏0
基于游标的分页接口实现

摘要：游标条数的分页接口实现命令用于迭代数据库中所有的，但是因为数据中的数量是不能确定的，线上直接执行会被打死的，而且的数量在你操作的过程中也是时刻在变化的，可能有的被删除，可能期间又有新增的。分页接口的实现，在偏业务的服务端开发中应该很常见，PC时代的各种表格，移动时代的各种feed流、timeline。出于对流量的控制，或者用户的体验，大批量的数据都不会直接返回给客户端，而是通过...

godruoyi 2019-08-23 13:06 评论0 收藏0