移动端ajax分页,移动端分页加载 - 花乐天的个人空间 - OSCHINA - 中文开源技术交流社区...

分页加载有底部loading和滚动体两部分组成

1.何时有loading?

当前数组的长度

2.如何判断滚动加载

if(ele.clientHeight+ele.scrolltop>ele.scrollHeight-50){

距离底部50触发

}

if (getScrollTop() + getWindowHeight() == getScrollHeight() && that.flag == false) { //此时滚动条已经下拉到底部了

that.flag = true

if (that.mLabelList.length 

that.getData(

原数组拼接回来的数据

that.falg=false

)

}

}

如何手动防抖:设定一个值为flag ,flag 为false 时才能为进入滚动,之后设为true,在完成ajax之后变为false  ,成为下一轮滚动

export function getScrollTop() {

var scrollTop = 0,

bodyScrollTop = 0,

documentScrollTop = 0;

if (document.body) {

bodyScrollTop = document.body.scrollTop;

}

if (document.documentElement) {

documentScrollTop = document.documentElement.scrollTop;

}

scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

return scrollTop;

}

//文档的总高度

export function getScrollHeight() {

var scrollHeight = 0,

bodyScrollHeight = 0,

documentScrollHeight = 0;

if (document.body) {

bodyScrollHeight = document.body.scrollHeight;

}

if (document.documentElement) {

documentScrollHeight = document.documentElement.scrollHeight;

}

scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

return scrollHeight;

}

//浏览器视口的高度

export function getWindowHeight() {

var windowHeight = 0;

if (document.compatMode == "CSS1Compat") {

windowHeight = document.documentElement.clientHeight;

} else {

windowHeight = document.body.clientHeight;

}

return windowHeight;

}