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;

});

};

};

}