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

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页，再日后就须要手动点击「加载更多」。