正文
用jquery写一个上拉加载
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
/*可加载页面吗*/
function canLoadMore() {
return $('.loadin').length < 1;
}
/*移除正在加载字样*/
function removeMore() {
$('.loadin').remove();
}
/*没有更多内容字样*/
function noMore($contentBox) {
$('.loadin').html('<div style="color: #999;font-size: 36px">没有更多了...</div>');
}
/*设置正在加载*/
function setMore($contentBox) {
$contentBox.append(
'<div class="loadin"><img src="../images/toLoad/toLoad.gif" alt=""></div>'
);
}/**
* 加载页面
* @param $contentBox object 容器
* @param url string 翻页请求的url
* @param $scrollBox object 容器
* @param param object 请求参数
* @param afterMoreMethod function
*/
function pageMore($contentBox,url,$scrollBox=null,param=null,afterMoreMethod=null){
// alert()
console.log($contentBox)
if($contentBox.length < 1)
return ; if($scrollBox == null)
$scrollBox = $contentBox; var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
//滚动时候获取显示区域高度
var hi = parseInt($scrollBox.get(0).offsetHeight);
console.log(hi,"offset");
$scrollBox.scroll(function () {
hi = hi == 0 ? parseInt($scrollBox.get(0).offsetHeight) : hi;
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt($(this).css('padding-bottom')),
paddingTop = parseInt($(this).css('padding-top')); console.log(nScrollHight, nScrollTop + paddingBottom + paddingTop + hi, hi);
if (nScrollTop + paddingBottom + paddingTop + hi >= nScrollHight) {
more();
}
}); $contentBox.data('page-num',1); function more() {
if(!canLoadMore()) return;
setMore($contentBox);
var page_num = $contentBox.data('page-num');
page_num = parseInt(page_num) + 1;
param = param ? param : Object();
param.page_num = page_num;
$.get(url,param,function(result){
if(result.code==1){
$contentBox.append(result.data.html);
$contentBox.data('page-num',page_num);
removeMore();
if(afterMoreMethod!==null)
afterMoreMethod();
}else{
noMore();
}
},'json')
}
}调用时候直接pageMore（$('参数一')，null，$（'参数二'）），
d
