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;

});

};

};

}