上拉数据加载
最近项目中需要对大量数据进行处理，鉴于项目是移动端项目，就采用类似于懒加载的上拉加载进行数据处理。
网上也找了很多插件，最后感觉挺繁琐，干脆自己走了一个简单的逻辑进行处理，话不多说，贴代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上拉加载数据测试</title>
<meta name="viewport" content="width=device-width">
<style>
.cont p{
height: 200px;
line-height: 200px;
font-size: 26px;
text-align: center;
width: 100%;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="cont">
<p>第1页</p>
<p>第2页</p>
<p>第3页</p>
<p>第4页</p>
<p>第5页</p>
<p>第6页</p>
<p>第7页</p>
<p>第8页</p>
<p>第9页</p>
<p>第10页</p>
</div>
</body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
loadData();
function loadData(){
var range = 50,maxpage = 5,page = 1,totalHeight=0;
$(window).scroll(function(){
var scrollHeight = $(window).scrollTop();//页面卷起的高度
totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
if(($(document).height()-range) <= totalHeight && page != maxpage){
$(‘.cont‘).append(‘<p>增添条数</p>‘);
page++;
}
})
}
/*实际项目中maxPage并不是前端进行写死的值，这里只是一个简单的demo，实际中前端实现上拉加载对于后台来说是分页功能实现。
* 因此实际中最大页码数应该是由后台进行返回的
* range是元素底部距离可视区高度差值，保证了用户在上拉加载的时候的体验度。
* */
</script>
</html>
时间： 2024-10-09 22:26:24