php 分页下拉自动加载数据,网页中,列表数据的分页加载、自动加载

1 简单说明
实际开发中 , 当数据量很大时 , 分页(分段)加载是必要的 , 不能一次性加载所有数据 。同时 , 当用户浏览到页面底部时 , 自动加载下一段数据并展示 , 可以增快新页面内容展现速度 , 提升用户体验 。
2 分页加载
分页加载时 , 需要额外维护几条相关数据:(当前页数)、(标志是否还有) ,  另外 , 可选择性添加字段 , 用于表示数据正在加载 。
data Model 的简易格式设计如下:
list: [],
: 1,
: 0,
:true
(ps: 服务端需要提供支持分段获取数据的API , 比如可以通过设置limit, 参数来指定数据区间)
分页加载大体流程为:

php 分页下拉自动加载数据,网页中,列表数据的分页加载、自动加载

文章插图
根据以及预定义好的「每次加载数据条数limit」 , 设置分段加载的参数
异步加载数据时 , 先将属性置为true , 用于显示效果
数据获取完成后 , 将结果拼接到list数组后面 , 同时将置为false、++
3 自动加载
分段加载的思路很简单 , 下面说说自动加载的一种实现方式 , 先上实际开发项目中的截图 。
滚动到「接近列表底部」时 , 可以看到「加载更多」字样 , 
当继续滚动页面到达底部时 , 则触发自动加载:
不难看出这里的实现思路就是「监听DOM的事件 , 当滚动到底部或者很接近的时候 , 触发下一页数据的加载」
具体到层面的实现 , 则需要先了解DOM元素的几个属性:、、等:
:容器元素中全部内容的高度(包括)
:容器元素的可视区域(注意 , 这里不一定是浏览器窗口的高度)
借网上的图说明一下:
: 滚动位置距离顶部的高度 , 当尚未滚动时 , 该值为0.
通过上诉三个值 , 即可计算出是否已经滚动到容器元素的底部位置了 ,  伪代码示意如下:
(){
let= ();
【php 分页下拉自动加载数据,网页中,列表数据的分页加载、自动加载】if(. - . - . < [一个较小的值]){