JS实现页面数据无限加载

在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：

当滚动条滚动到页面底部时，提示“正在加载…”。

页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：

实现数据无限加载的过程大致如下：

1.滚动条滚动到页面底部。

2.触发ajax加载，把请求返回的数据加载到列表后面。

如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：

要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取？可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”。

上面的判断，我封装了一个方法：

rush:js;"> //检测滚动条是否滚动到页面底部 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毫秒之后再监测。

下面是核心代码实现：

rush:xhtml;"> <Meta charset="UTF-8">

demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下：

rush:js;"> /** * 模拟接口. */ 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上：

在线演示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。