web简易下滑分页加载器(Function)

Posted 鲁小胖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web简易下滑分页加载器(Function)相关的知识,希望对你有一定的参考价值。

//分页加载器
function pagingLoad(options) { //分页加载
if (!document.getElementById(‘load_txt‘)) {
this.loadTxt = document.createElement(‘div‘);
loadTxt.id = "load_txt";
loadTxt.style.textAlign = "center";
document.body.appendChild(loadTxt);
};
this.oPageLoad = {
page: 1,
el: options.el, //滚动的对象
apiUrl: options.url,
data: options.data || {},
tailload: true,
sucload: true,
totalpage: options.totalpage, //总页数
containArea: options.containArea, //内容区
callback: options.callback
};
var _this = this;
this.oPageLoad.el.onscroll = function () {
var scrollTop = this.scrollTop, //滚动条距顶部的高度
containHei = _this.oPageLoad.containArea.scrollHeight, //内容高度(scrollHeight)
clientHei = this.clientHeight; //可视高度
console.log(‘当前总页数‘ + _this.oPageLoad.totalpage, scrollTop, containHei, clientHei);
if (_this.oPageLoad.page == _this.oPageLoad.totalpage && containHei - scrollTop - clientHei < 20) { //判断页码是否等于总页码且滚动条到达最底部
if (_this.oPageLoad.tailload) {
_this.loadTxt.innerhtml = "已全部加载完成";
_this.oPageLoad.tailload = !_this.oPageLoad.tailload;
return;
} else {
_this.loadTxt.innerHTML = "已全部加载完成";
return;
}
};

if (containHei - scrollTop - clientHei < 20 && _this.oPageLoad.sucload) {
_this.oPageLoad.page++;
_this.oPageLoad.sucload = !_this.oPageLoad.sucload;
_this.loadTxt.innerHTML = "加载中...";
console.log(‘loading...第‘ + _this.oPageLoad.page + ‘页‘);
_this.oPageLoad.data["page"] = _this.oPageLoad.page;
httpGet(_this.oPageLoad.apiUrl, _this.oPageLoad.data, function (data) {//请求加载
commonArray = commonArray.concat(data);
if (pagingLoadOption.containArea == document.getElementById(‘successList‘)) {//区分区块分区加载(自己的逻辑处理)
//var $successData = template(‘success_list‘, { info: commonArray, timeFormat: timeFormat });
//$("#successList").html($successData);
} else {//自己的逻辑处理
//var $inviteData = template(‘invite_list‘, { info: commonArray, timeFormat: timeFormat });
//$("#inviteList").html($inviteData);
};
_this.loadTxt.innerHTML = "";
_this.oPageLoad.sucload = !_this.oPageLoad.sucload;
});

};

};
}



以上是关于web简易下滑分页加载器(Function)的主要内容,如果未能解决你的问题,请参考以下文章

关于分页加模糊查询的存储过程

2017-5-25 分页加条件查询合体

JPA 以SQL语句实现分页加模糊查询(参数可能为空)

layui 数据表格重新加载数据分页器回到第一页

分页器原理

layui分页怎么配合php使用