滚动到底加载更多

// 滚动到底部的时候加载更多
/* @param content dom 需要追加数据的dom
* @param opts object 其他额外参数
* @param loadText dom 需要显示加载状态的dom
* @param
*/
handleLoadMoreByScroll: function(content, opts) {
var hasLoadedEnd = false;
var isLoading = false;
var currOffsetTop = 0;
// 当前页面的高度加上滚动过去的高度和
var currScrollTotal = 0;
var currScrollDistance = 0;
var scrollBoundry = 0;
var setOnce = false;
var whitePage = true;
var loadText, scrolltobottom;
// 获取视口的高度
var pageHeight = document.documentElement.clientHeight;

opts = opts || {};
loadText = opts.loadText;
scrolltobottom = opts.scrolltobottom;

function handleScrollLoad(e) {
var st = document.documentElement.scrollTop || document.body.scrollTop;
currScrollTotal = st + pageHeight;
scrollBoundry = content.offset().top + content.outerHeight() + currScrollDistance;
// 当滚动过去的高度小于边界高度，这时候就显示加载更多
if (currScrollTotal < scrollBoundry) {
if (isLoading) {
setScrollTipsText();
return false;
}
// 否则就显示加载中
} else {
// 如果没有加载中。才让他加载，避免多次重复加载

if (!isLoading) {
isLoading = true;
setScrollTipsText();
// 没有加载到底才让他可以继续向下加载，
// 如果已经加载到底部了。就不再继续触发
if (!hasLoadedEnd) {
scrolltobottom();
}

}
}

}
function loadWhenNoData(){
if(whitePage){
whitePage = false;
scrolltobottom();
}
}
// 已经没有更多数据加载的时候触发
function complete(callback) {
reset();
hasLoadedEnd = true;
callback && callback();

return this;
}
// 避免某些必须要一开始就触发完成加载之后有数据也无法重新触发滚动到底部事件的情况
function start(callback) {
hasLoadedEnd = false;
callback && callback();
return this;
}
// 本次加载完成之后通过这个方法来让下次可以重新滚动加载
function reset(callback) {
isLoading = false;
callback && callback();

return this;
}
// 设置距离滚动dom底部多高的时候触发滚动加载
function setScrollDistance(distance) {
currScrollDistance = distance;

return this;
}

function setScrollTipsText() {
var text = '';
// 如果加载完所有的数据。就提示暂无更多。并不再往下走
if (hasLoadedEnd) {
if (!setOnce) {
setOnce = true;
text = "暂无更多~";
loadText.text(text);
}

return false;
}
// 如果加载中
text = isLoading ? "加载中..." : "加载更多";
loadText.text(text);

}
if (content.length > 0) {
$(window).on('scroll', handleScrollLoad);
}
return {
complete: complete,
reset: reset,
start: start,
loadWhenNoData:loadWhenNoData,
setScrollDistance: setScrollDistance,
setScrollTipsText: setScrollTipsText
}
},

转载于:https://www.cnblogs.com/yuweia/p/10524058.html