分页加载有底部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 (patMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
