JS实现页面数据无限加载

前端之家收集整理的这篇文章主要介绍了JS实现页面数据无限加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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毫秒之后再监测。

下面是核心代码实现:

<Meta charset="UTF-8"> 无限<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>

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上:

在线演示:

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

原文链接:https://www.f2er.com/js/45906.html

猜你在找的JavaScript相关文章