在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：
页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：
实现数据无限加载的过程大致如下：
2.触发ajax加载，把请求返回的数据加载到列表后面。
如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到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毫秒之后再监测。
下面是核心代码实现：
demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下：
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上：
return documentHeight - viewPortHeight - scrollHeight < 20;
}
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()
}
}
});
