来源：http://itssh.cn/post/933.html
Ajax滚动加载数据，主要思路：
1.进入页面时执行onLoad方法开始加载数据
2.屏幕下拉时判断底部距离是否小于滚动距离+窗体高度，如果小于则重新加载数据
****案例:****
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Ajax滚动加载数据</title>
<!--
@author:sm
@email:sm0210@qq.com
@desc:Ajax滚动加载数据
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
/*
box
*/
.box {
width: 795px;
margin: 0 auto;
}
/*
ul
*/
.list ul {
width: 100%;
overflow: hidden;
}
/*
item
*/
.list ul li {
width: 180px;
height: 200px;
margin-left: 15px;
margin-bottom: 15px;
float: left;
background-color: #ccc;
text-align: center;
line-height: 200px;
cursor: pointer;
}
/*
item鼠标经过
*/
.list ul li:hover {
background-color: #e1e1e1;
}
/*
加载更多
*/
#loading {
height: 50px;
width: 765px;
line-height: 50px;
text-align: center;
cursor: pointer;
margin: 0 auto;
}
/*
加载更多经过
*/
#loading:hover {
background-color: #cecece;
}
</style>
<!-- 引入jquery -->
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<!-- -->
<script type="text/javascript">
$(function(){
//请求数据接口
var url="./json.json";
//渲染数据集合dom
var list=$("#list");
//加载更多dom
var loadingBtn=$("#loading");
//是否需要加载
var isLoad =true;
//当前查询第几页
var currentPage = 1;
//没有更多数据
var nomore_Text = '没有更多数据';
/*
请求数据接口
*/
function loadData(){
//发送ajax
$.ajax({
//url
url: url,
//请求方式
type:'POST',
//参数
data: {currentPage:currentPage},
//成功回调
success: sucessCallback,
//失败回调
error: function(e, e2, e3){
//
alert('请求失败，原因：'+e3);
}
});
}
/*
成功回调函数
*/
function sucessCallback(data){
//当前页自增
currentPage++;
//
var html = '',result = data.list, len = result.length,i = 0;
//循环数据
for(; i<len;i++){
var rs = result[i], title = rs.title,id=rs.id,desc = rs.desc;
html+='<li data-id="'+id+'" title="'+desc+'">'+title+'</li>';
}
//渲染数据
list.append(html);
//接口是否查询完毕
if(data.pageCount == data.pageNo || currentPage > data.pageCount){
//数据全部加载完毕
isLoad = false;
//
loadingBtn.html(nomore_Text);
}
}
/*
判断是否要加载接口
*/
function isScrollLoad(){
//加载更多距离
var btn_top = loadingBtn.offset().top;
//窗体高度
var window_height = $(window).height();
//滚动距离
var scroll_Top = $(window).scrollTop();
//加载更多高度
var loading_height = loadingBtn.height();
//是否需要加载(底部距离是否小于窗口高度+滚动的距离)
return btn_top < scroll_Top + window_height - (loading_height - 5) ? true : false;
}
/*
滚动事件监听
*/
$(window).scroll(function(){
//是否滚动到底部
var _needload = isScrollLoad();
//
if(_needload && isLoad){
//加载数据
loadData();
}
});
/*
页面加载完毕执行一次查询
*/
window.onload = function(){
//加载数据
loadData();
};
/*
点击加载更多
*/
loadingBtn.click(function(){
//是否加载数据
if(isLoad)
loadData();
});
});
</script>
</head>
<body>
<div class="box">
<!-- list -->
<div class="list">
<ul id="list"></ul>
</div>
<!-- 加载更多 -->
<div id="loading">点击加载更多</div>
</div>
</body>
</html>
****JSON数据：****
{
"pageNo": 1,
"pageCount": 3,
"list": [
{
"id": "1",
"title": "测试数据1",
"desc": "描述数据1"
}
, {
"id": "2",
"title": "测试数据2",
"desc": "描述数据2"
}
, {
"id": "3",
"title": "测试数据3",
"desc": "描述数据3"
}
, {
"id": "4",
"title": "测试数据4",
"desc": "描述数据4"
}
, {
"id": "5",
"title": "测试数据5",
"desc": "描述数据5"
}
, {
"id": "6",
"title": "测试数据6",
"desc": "描述数据6"
}
, {
"id": "7",
"title": "测试数据7",
"desc": "描述数据7"
}
, {
"id": "8",
"title": "测试数据8",
"desc": "描述数据8"
}
, {
"id": "9",
"title": "测试数据9",
"desc": "描述数据9"
}, {
"id": "10",
"title": "测试数据10",
"desc": "描述数据10"
}
]
}
****效果：****
Paste_Image.png
网友评论