您的位置：首页 > 其它

一个简单的无限滚动的加载数据实现

2016-09-18 10:56 483 查看

早上本来想研究昨天晚上携程的那道题目的，但是感觉不知道如何下手，就研究了下如何实现无限滚动加载数据。

以前项目里也用到过，不过是别人封装好的，我只需要调用就好了。自己做还是遇到了点小问题。

1、如何确定滚动条的位置，其实想通了很简单的，就是利用scrollHeight和scrollTop以及可视区的高度来实现的。

2、就是如何保证加载数据的时候，不会出现重复加载。这个也很简单，标记每次加载结束的位置。如果你用的是数据库的话，可以采用分页的形式，每次只添加一页的内容。每当滚动条到底部的时候再加载下一页就好了。

当然，你也可以对代码进行改进，每当加载数据的时候，出现一个圈圈，提醒用户我是在努力加载数据。使得用户不会出现烦躁的心情。

附源码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
height: 100px;

width: 100px;
overflow: auto;
margin: 0;
padding: 0;
}
input{
width: 96px;
}
</style>
</head>
<body>

<div>
<input type="text" >
<input type="button" value="aa"/>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>s</li>
</ul>
</div>

<script >
//要加载的数据
var arr=[1,1,2,3,8,2,32,3,5,8,28,2,3,2,3,5,3,1,4,12,1,2,1,31,23,12,3,12,3,12,3,18,35,2,1,321,3,21,3,12,3,123,6,21321,3,17,3,2,3,12,3,12,1,5,23123,1,321,3,1,23,1,3];

var ul=document.getElementById("ul");
var start=0;

//监听滚动事件，当滚动条的位置距离小于某个值的时候，就加载数据
ul.onscroll=function(){
if(ul.scrollHeight-ul.scrollTop-90<30){
load(start,5,arr,ul);
start+=5;
}
}

//加载数据函数
function load(start,num,arr,ul){
var html="";
if(start+num>arr.length){return ;}
for(var s=start;s<start+num;s++){
html+='<li>'+arr[s]+'</li>';

}
ul.innerHTML=ul.innerHTML+html;
}
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航