javascript 滚动分页

由于这两天项目用到滚动分页 ，所以写了个处理滚动分页的js类 备用吧当,调用只需
new ScrollPage({...});//配上相应参数就好了。。。

function ScrollPage(config){

    this.config = config;
    this.defaultLoadingTemplate = "<tr id='default_loading'  style='text-align:center'><td  style='text-align:center' colspan='6' >努力加载中...</td></tr>";
    this.scrollTarget = config.scrollTarget;
    this.hasLoad = true;
    this.pageNo  = config.pageNo ? config.pageNo:1;
    this.data = !config.data ? {"pageNo": this.pageNo}:config.data;
    this.dataType = config.dataType?config.dataType:"html";
    this.url = config.url?config.url:config.getUrl();
    this.type = config.type?config.type:"get";
    this.appendTarget = config.appendTarget;
    this.responseData  = "";
    this.responseHandler = "";
    this.httpCode = 200;
    this.hasError = false;
    this.loadingTarget = config.loadingTarget?config.loadingTarget:this.defaultLoadingTemplate;

    this.before = {};

    this.after = {};

    this.finally = {};

    this.init();

}
ScrollPage.prototype.init = function(){
    //张定事件
    this.addScrollListener(this);
    var obj = this;
    //before涵数初始化
    if(!this.config.before){//添加默认执行前的拦截器
        this.addBefore(function(){
            $(obj.appendTarget).after(obj.loadingTarget);
        });
    }else{
        this.addBefore(obj.config.before);////用户自定义的拦截器
    }
    //after函数初始化

    if(!this.config.responseHandler){//默认的处理器
        this.addAfter(function(){
            $(obj.appendTarget).append(obj.responseData);
            obj.increamentPageNo();
        })

    }else{
        this.addAfter(this.config.responseHandler);//用户自定义的拦截器
    }

    //finally涵数初始化 默认必需处理的
    this.addFinally(function(){
        var s_top = $(obj.scrollTarget).get(0).scrollTop;
        $(obj.scrollTarget).get(0).scrollTop = s_top-5;//往上调一点
        $(obj.loadingTarget).hide();
    })
    //用户自定义的 final
    if(this.config.complete){
        this.addFinally(this.config.complete)
    }

}
ScrollPage.prototype.addScrollListener= function(obj){
    $(obj.scrollTarget).scroll(function(){
        var targetHight = $(obj.scrollTarget).height();
        var scrollHight = $(obj.scrollTarget)[0].scrollHeight;
        var scrollTop = $(obj.scrollTarget)[0].scrollTop;
        //触底了 要加载数据了
        if(scrollTop + targetHight >= scrollHight){
            obj.execute(obj);
        }
    });
};
//设置是否加载了
ScrollPage.prototype.setHasLoad = function(hasLoad){this.hasLoad = hasLoad;};
ScrollPage.prototype.getHasLoad = function(){ return this.hasLoad;};

//post数据
ScrollPage.prototype.setData = function(data){this.data = data;};
ScrollPage.prototype.getData = function(){ return this.data;};

//pageNo+1
ScrollPage.prototype.increamentPageNo = function(){
    this.pageNo ++ ;
    this.data.pageNo = this.pageNo;
};
ScrollPage.prototype.getPageNo = function(){ return this.pageNo};

//添加请求前的处理器
ScrollPage.prototype.addBefore = function(before){
    var key = "before_" + this.before.length;
    this.before.key = before;
};
//添加响应后的
ScrollPage.prototype.addAfter = function(after){
    var key = "after_" + this.after.length;
    this.after.key = after;
};
//添所有最后的处理器
ScrollPage.prototype.addFinally = function(final){

    var key = "finally_" + this.finally.length;
    this.finally.key = final;
};

ScrollPage.prototype.setResponseData = function(data){this.responseData = data;};
ScrollPage.prototype.getResponseData = function(){ return this.responseData;};

ScrollPage.prototype.setUrl = function(url){this.url = url;};
ScrollPage.prototype.getUrl = function(){ return this.url;};

ScrollPage.prototype.handleBefore = function(){
    this.setHasLoad(false);
    for(var fun in this.before){
        this.before[fun]();
    }
}
ScrollPage.prototype.handleAfter = function(){
    for(var fun in this.after){
        this.after[fun]();
    }
    this.setHasLoad(true);
}
ScrollPage.prototype.handleFinally = function(){
    for(var fun in this.finally){
        this.finally[fun]();
    }
}
ScrollPage.prototype.handleError = function(){
    alert("加载出错");
}
//设置当前页
//查询
ScrollPage.prototype.execute = function(obj){
    $.ajax({
        url :obj.getUrl(),//ajaxUrl,
        type:"post",
        data : obj.getData(),
        dataType:obj.dataType,
        beforeSend:function(){
            //开始后打开loading效果
            if(!obj.getHasLoad()){
                return false;
            }
            obj.handleBefore();

        },
        success:function(data){
            obj.setResponseData(data);
            obj.handleAfter();
        },
        error:function(){
            obj.handleError();
        },
        complete:function(data){
            //结束后清掉loading效果
            obj.handleFinally();
        }
    });
};

评论

4 楼 wahaha38 2014-09-25  

怎么填对应的参数呢

3 楼 wahaha38 2014-09-25  

这个具体要怎么用呢

2 楼 ljl_ss 2014-03-31  

无尘道长 写道

很感谢，用上了，不过发现2个问题：
1、每次翻页均会append一个loading的信息，我修正了一下：
原：this.addBefore(function(){ 
            $(obj.appendTarget).after(obj.loadingTarget); 
        });

修改后：this.addBefore(function(){ 
        if ( $(obj.loadingTarget).length == 0 ) {
        $(obj.appendTarget).after(obj.loadingTarget); 
        } else {
        $(obj.loadingTarget).show();
        }
        }); 

2、如果scrollTarget为window则67、68行无法取到scrollHeight和scrollTop的信息，当是实现窗口滚动分页时，可以把$(obj.scrollTarget)[0].scrollHeight换成：$("body")[0].scrollHeight，把$(obj.scrollTarget)[0].scrollTop换成 $("body")[0].scrollTop

嘿嘿。。。多谢指教，因为我们只测了chrome浏览器

1 楼 无尘道长 2014-01-18  

很感谢，用上了，不过发现2个问题：
1、每次翻页均会append一个loading的信息，我修正了一下：
原：this.addBefore(function(){ 
            $(obj.appendTarget).after(obj.loadingTarget); 
        });

修改后：this.addBefore(function(){ 
        if ( $(obj.loadingTarget).length == 0 ) {
        $(obj.appendTarget).after(obj.loadingTarget); 
        } else {
        $(obj.loadingTarget).show();
        }
        }); 

2、如果scrollTarget为window则67、68行无法取到scrollHeight和scrollTop的信息，当是实现窗口滚动分页时，可以把$(obj.scrollTarget)[0].scrollHeight换成：$("body")[0].scrollHeight，把$(obj.scrollTarget)[0].scrollTop换成 $("body")[0].scrollTop