注：以下方法是根據(jù)框架設(shè)計的，但也可以理解借鑒
公共接口
$(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 ); ?//內(nèi)容區(qū)域的高度
? ? return Math.abs(scrollTop + clientHeight - scrollHeight) <=50; ? //高度差在50內(nèi)可以判斷到底了
}
? ? //判斷到頂部了
? ? 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() { ??//定義當(dāng)前滾動的區(qū)域
? ? var scrollTop =me._param.config.scroller
? ? ? ? ?jQuery(me._param.config.scroller).scrollTop() ? ?//自己設(shè)置的滾動區(qū)域
? ? ? ? : jQuery(document).scrollTop(); ? ?//瀏覽器的滾動區(qū)域
? ? if(scrollTop >0&& !scrolling &&isBottom()) {
? ? ? ? scrolling =true;
? ? try{
? ? ? ? //找到當(dāng)前頁面的onScroll方法
? ? ? ? var scrollEvent =me.control().onScroll;? ? //當(dāng)前頁面的onScroll方法，me.control() 是當(dāng)前頁面
? ? ? ? if( scrollEvent ) scrollEvent(onFinish,true); ? ?//這里的true和下面的false分別是用來表示滾到底部（true）還是頂部(false)了
? ? ? ? else onFinish();
? ? ? ?}catch(e) {
? ? ? ? ? ? onFinish();
? ? ? ? ?}
? }
? ? if(scrollTop ==0&& !scrolling &&isTop()) {
? ? scrolling =true;
? ? try{
? ? ? ? ?//找到當(dāng)前頁面的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) { ? //這里初次調(diào)用可以直接賦值參數(shù)，比如 onScroll ( null , true) 設(shè)置首次下滾
? ? ?//如果上滾則不能進(jìn)行下面的一系列操作
? ? ?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) {
? ? ? // 數(shù)據(jù)返回后的操作
? ? ?finished && finished();
},true);
}
