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

2018-06-24 01:29:19来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

//分页加载器
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;
});

};

};
}

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Demo—cookie电商购物车

下一篇:从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScr