移动端分页插件

/*******
<div id="js-page-limit" class="page-limit" data-page-total='10' data-current-index='1'>
    正在加载更多...
</div>
var pageLimit = new PageLimit({
                elem:$('#js-page-limit'),
                loadType:'scroll',
                loadStepText:['获取更多','正在加载..','没有更多数据'],
                url:'data/test.json',
                callback:function(ret){
                    console.log(ret)
                },
                params:{
                    type:'home',
                    limit:20
                }
        });
@elem -> 指定触发分页的钩子元素
@loadType -> 触发分页的方式，手动敲击tap、滚动到底部触发scroll
@url -> 分页的接口
@loadStepText -> 触发分页的几个步骤的显示文本，三步，前，正在，最后一页
@callback -> 分页数据请求返回成功
@params -> 指定接口查询串

@name 杨永
@call 18911082352
@version 1.0.0
*********/

;(function($){

    var PageLimit = function(setting){

        var _this_ = this;
        //扩展相关数据
        this.setting = PageLimit._DEFAULT_SETTING_;
        this.setting = $.extend({},this.setting,setting);
        //保存总页数和当前页
        this.pageTotalSize = this.setting.elem.attr('data-page-total');
        this.pageCurrentIdx = this.setting.elem.attr('data-current-index');
        //初始化的时候加载一页
        this.loadPage();
        //根据加载类型，初始化不同的触发方式
        if(this.setting.loadType == 'tap'){
            this.setting.elem.tap(function(){
                _this_.loadPage();
            }).text(this.setting.loadStepText[0]);
        }else{
            //如果是上拉触发
            this.setting.elem.css('opacity',0);
            $(window).scroll(function(){
                window.clearTimeout(this.timer);
                this.timer = window.setTimeout(function(){
                    var scrollTop = $(window).scrollTop();
                    var offsetTop = _this_.setting.elem.offset().top;
                    if(scrollTop+window.innerHeight>=offsetTop){
                        _this_.setting.elem.css('opacity',1);
                        if(!_this_.setting.elem.hasClass('page-state-loading')){
                            _this_.loadPage();
                        };
                    };    
                },200);
            });
        };

    };

    PageLimit._DEFAULT_SETTING_ = {
        elem:null,
        loadType:'pull',
        url:'你还没有指定url.json',
        loadStepText:['获取更多','正在加载..','没有更多数据'],
        callback:null,
        params:{}
    };

    PageLimit.prototype = {
        loadPage:function(index){
            var self = this;
            var setting = this.setting;
            //如果加载完毕
            if(setting.elem.hasClass('page-state-loaded')){
                setting.elem.text(setting.loadStepText[2]).css('opacity',1);
                return;
            };
            if(setting.loadType == 'tap'){
                setting.elem.text(setting.loadStepText[1]);
            }else{
                setting.elem.text(setting.loadStepText[1]).css('opacity',1);
            };
            
            //当发起加载的时候，给加载标增加class=page-state-loading
            setting.elem.addClass('page-state-loading');
            //把当前加载页设置到params
            this.pageCurrentIdx = index || this.pageCurrentIdx;
            setting.params.page = this.pageCurrentIdx;
            //发起请求
            $.get(setting.url,setting.params,function(ret){
                if(setting.loadType == 'tap'){
                    setting.elem.text(setting.loadStepText[0]);
                }else{
                    setting.elem.text(setting.loadStepText[0]).css('opacity',0);
                };
                //当页数加载完毕，给加载标签增加状态
                if(self.pageCurrentIdx == self.pageTotalSize){
                    setting.elem.addClass('page-state-loaded');
                };
                //加载成功后，把当前页加1、删除class=page-state-loading
                setting.elem.removeClass('page-state-loading').attr('data-current-index',setting.params.page);
                self.pageCurrentIdx++;
                //回调函数
                setting.callback&&setting.callback(ret);
            });
        }
    };

    window.PageLimit = PageLimit;

})(Zepto);