监控页面的滚动事件(上滚/下滚)
注：以下方法是根据框架设计的，但也可以理解借鉴
公共接口
$(function() { // js部分开始
var scrolling =false; //判断到底了
functionisBottom() {
var scrollTop =0;
if ( document.documentElement && document.documentElement.scrollTop ) {
scrollTop = document.documentElement.scrollTop;
}else if ( document.body ) {
scrollTop =document.body.scrollTop;//滚动条高度
}
var clientHeight =document.documentElement.clientHeight; //浏览器高度
var scrollHeight = Math.max( document.body.scrollHeight , document.documentElement.scrollHeight ); //内容区域的高度
return Math.abs(scrollTop + clientHeight - scrollHeight) <=50; //高度差在50内可以判断到底了
}
//判断到顶部了
functionisTop(){
var scrollTop =0;
if ( document.documentElement && document.documentElement.scrollTop) {
scrollTop =document.documentElement.scrollTop;
} else if ( document.body) {
scrollTop =document.body.scrollTop;
}
return scrollTop==0;
}
functiononFinish() {
scrolling =false;
}
functiononScroll() { //定义当前滚动的区域
var scrollTop =me._param.config.scroller
?jQuery(me._param.config.scroller).scrollTop() //自己设置的滚动区域
: jQuery(document).scrollTop(); //浏览器的滚动区域
if(scrollTop >0&& !scrolling &&isBottom()) {
scrolling =true;
try{
//找到当前页面的onScroll方法
var scrollEvent =me.control().onScroll; //当前页面的onScroll方法，me.control() 是当前页面
if( scrollEvent ) scrollEvent(onFinish,true); //这里的true和下面的false分别是用来表示滚到底部（true）还是顶部(false)了
else onFinish();
}catch(e) {
onFinish();
}
}
if(scrollTop ==0&& !scrolling &&isTop()) {
scrolling =true;
try{
//找到当前页面的onScroll方法
var scrollEvent = me.control().onScroll;
if( scrollEvent ) scrollEvent(onFinish,false);
else onFinish();
}catch(e) {
onFinish();
}
}
}
window.addEventListener("scroll",onScroll,false);
});
某页面的js部分
onScroll:function(finished,isBottom) { //这里初次调用可以直接赋值参数，比如 onScroll ( null , true) 设置首次下滚
//如果上滚则不能进行下面的一系列操作
if(!isBottom){ //这里对上滚刷新做了限制
finished && finished();
return;
}
if( that.$scope.count!=null&& that.$scope.userMsgList.length>= that.$scope.count) { //判断
finished && finished();
return;
}
Util.ajax({ //ajax请求
method:"POST",
data:{ },
url:Util.getApiUrl("")
},function(data) {
// 数据返回后的操作
finished && finished();
},true);
}
