今天在技术群看到有朋友有需求,就随手写了一个,大家随便看看~
demo地址:http://www.dtzhuanjia.com/pri...
(备注:这个主要用在移动端,所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧)
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>下一页</title>
<meta name="Keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
<link rel="stylesheet" href="http://www.dtzhuanjia.com/css/init.css">
<link rel="stylesheet" href="http://www.dtzhuanjia.com/private/plugin/nextpage/index.css">
</head>
<body>
<script src="http://www.dtzhuanjia.com/js/calrem.js"></script>
<style>
.block{width:100%;height:4rem;line-height:4rem; background:#ccc;text-align:center;font-size:1rem;color:#fff;border-bottom:}
</style>
<div class="main">
<div class="block">已经加载的1-1</div>
<div class="block">已经加载的1-2</div>
<div class="block">已经加载的1-3</div>
<div class="block">已经加载的1-4</div>
<div class="block">已经加载的1-5</div>
</div>
<script src="http://www.dtzhuanjia.com/js/basic/jquery.js"></script>
<script src="http://www.dtzhuanjia.com/private/plugin/nextpage/index.js"></script>
<script>
$(document).ready(function(){
var initNextPage = new InitNextPage({
bottom : 20,//距离底部像素
target : ".main",//插入目标源
url : "http://www.dtzhuanjia.com/private/plugin/nextpage/nextPage.php"//ajax请求的url
})
});
</script>
</body>
</html>
js代码:
function InitNextPage(obj){
_this = this;
_this.bottom = obj.bottom||10;//距离底部像素
_this.target = obj.target||"body";//插入目标源
_this.url = obj.url||"none";//ajax请求的url
_this.page = 2;
//滑到底
$(window).scroll(function(){
_this.scrollToBottom();
});
}
InitNextPage.prototype = {
scrollToBottom : function(){
if($(window).scrollTop()+$(window).height()>$(document).height()-_this.bottom){
if(_this.url=="none"){
alert("ajax url不能为空");
return;
}
$.ajax({
url : _this.url,
async: false,
data : {
page : _this.page,
},
success : function(data){
_this.page++;
$(_this.target).append(data);
}
});
}
}
}
备注:
var initNextPage = new InitNextPage({
bottom : 20,//距离底部像素
target : ".main",//插入目标源
url : "http://www.dtzhuanjia.com/private/plugin/nextpage/nextPage.php"//ajax请求的url
})
上面代码中:
bottom是距离底部多少像素时执行ajax,默认10
target是执行成功后,像哪个dom插入返回的数据,默认为body
url是ajax url地址,必填。
如果有其他需求,比如返回json(例子中直接返回Html),可以修改success中的代码,就不赘述了~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。