富贵资源网 Design By www.hznty.com
在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：
当滚动条滚动到页面底部时，提示“正在加载…”。
当页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：
实现数据无限加载的过程大致如下：
1.滚动条滚动到页面底部。
2.触发ajax加载，把请求返回的数据加载到列表后面。
如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：
文档高度 - 视口高度 - 滚动条滚动高度 < 20
要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取？可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”。
上面的判断，我封装了一个方法：
//检测滚动条是否滚动到页面底部
function isScrollToPageBottom(){
//文档高度
var documentHeight = document.documentElement.offsetHeight;
var viewPortHeight = getViewportSize().h;
var scrollHeight = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0;
return documentHeight - viewPortHeight - scrollHeight < 20;
}
判断有了，我们就可以开启一个定时器，900毫秒监测一次，如果isScrollToPageBottom()返回true则调用ajax请求数据，如果返回false则通过900毫秒之后再监测。
下面是核心代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无限分页</title> <link rel="stylesheet" href="assets/css/index.css"/> </head> <body> <div class="l-page"> <ul id="list" class="list"> </ul> </div> <script src="/UploadFiles/2021-04-02/jquery.min.js">demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下：
/** * 模拟接口. */ var i = 0, len = 200, addresses = ["四川", "北京", "上海", "广州", "深圳", "甘肃", "云南", "浙江", "青海", "贵州"]; function getData(){ var size = Math.min(i + 50, len), arr = []; for(; i < size; i++){ arr.push({ name: "苹果" + (i % 10 + 1), pic: "assets/images/iphone" + (i % 10 + 1) + ".jpg", price: parseInt(Math.random() * 10000), star: parseInt(Math.random() * 1000), address: addresses[i % 10] }) } return arr; } $.mockjax({ url: 'http://localhost:8800/loadData*', responseTime: 1000, response: function(settings){ this.responseText = { status: true, data: getData() } } });整个完整的demo我已上传到github上：
https://github.com/heavis/pageLoader
在线演示：
https://heavis.github.io/pageLoader/index.html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...