移動端分頁插件

/*******
<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');
                };
                //加載成功後，把當前頁加一、刪除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);