iscroll5 版本下的 上拉，下拉 加載數據

上拉時候只是加載第一頁的內容，可根據實際狀況修改其中的代碼。

<section id="downwraper" class="nodeBottom bot0 bgfff">
    <div id="downscroller">
        <div id="pullDown">
            <div class="pullDownLabel">正在加載中...</div>
        </div>
        <div id="out">
            <div id="datalist">
            </div>
        </div>
        <div id="pullUp">
            <div class="pullUpLabel">正在加載中...</div>
        </div>
    </div>
</section>
<div class="fixedbg navfixed"> </div><br><br>

<script><br>  //上拉
    var strStop = true;
    var page_data_url = '/chinalao/wap/public/sgrab/indexlist';
    var noDataUrl = '/chinalao/wap/public/sgrab/indexmore';
    var condition_str = 'dG90YWxfY291bnQ9MCZjaXR5aWQ9NDIyNg%3D%3D';
    var page_count = 1;
    var current_page = 1;
     
    var loadlist = new Loadlist({'pageUrl':page_data_url,'pageCondition':condition_str,"pageNoUrl":noDataUrl,'pageCount':page_count,'stopDown':strStop,'callback':function(){
  
        if($("#datalist").outerHeight()<=($(window).height()-120)){
            $("#out").height($(window).height()-120);
            loadlist._setOptionStopDown(true);
        }else{
            $("#out").css("height","auto");     
            loadlist._setOptionStopDown(false);
        }
    }});
    loadlist.loaded();

</script>

<script>
//js:
;(function () {  
    var Loadlist = function(opt) {
        var strScroll; 
        var pullUpEl, pullUpL;
        var pullDownEl, pullDownL;        
        var loadingStep = 0; 
        var strHtml="";
        var curpage = 1;
        this.defaults = {
            'pageUrl':"",
            'pageCondition':"",
            'pageNoUrl':"",
            'pageCount':1,
            'stopDown':false,
            'callback':null
        },
        this.options = $.extend({}, this.defaults, opt);
        this.stopDownMod = this.options.stopDown;
        this.stopClick = false;
    };
    Loadlist.prototype = {
        loaded: function() {
            var pgCount=this.options.pageCount;
            var _this = this;
            pullDownEl = $('#pullDown');  
            pullDownL = pullDownEl.find('.pullDownLabel');  
            pullDownEl.attr('class','').hide(); 
            
            pullUpEl = $('#pullUp');  
            pullUpL = pullUpEl.find('.pullUpLabel');  
            pullUpEl.attr('class','').hide();  
            strScroll = new IScroll('#downwraper', {  
                probeType: 2
            });  
            //滾動時  
            strScroll.on('scroll', function(){  
                    if(pullDownEl.length>0&&!pullDownEl.attr('class').match('flip|loading'&&loadingStep == 0) ){
                        if (this.y>5) {  
                            //下拉刷新效果  
                            pullDownEl.show();  
                            pullDownEl.addClass('flip');  
                            pullDownL.html('下拉顯示更多...');  
                            loadingStep = 1;
                            //下拉獲取數據並改變條件
                            _this.getNoData(); //可刪除 此爲加載數據改變頁面上的條件
                            //strScroll.refresh(); //修正跳動bug
                        }    
                    }
                    if(loadingStep == 0&& !pullUpEl.attr('class').match('flip|loading')&&!_this.stopDownMod){                     
                        if (this.y < (this.maxScrollY - 5)) {  
                            //上拉刷新效果
                            pullUpEl.show();  
                            strScroll.refresh();  
                            pullUpEl.addClass('flip');
                            if(pgCount>curpage){
                                pullUpL.html('上拉顯示更多...');
                            }else{
                                pullUpL.html('已是最後一頁');
                            }
                            loadingStep = 1;  
                        }  
                    }  
            });  
            //滾動完畢  
            strScroll.on('scrollEnd',function(){  
                if(loadingStep == 1){ 
                    if(pullDownEl.length>0&&pullDownEl.attr('class').match('flip|loading')){  
                        pullDownEl.removeClass('flip').addClass('loading');  
                        pullDownL.html('正在加載...');  
                        loadingStep = 2;  
                        _this.pullDownAction();  
                    }
                    if(pgCount>curpage){//若是當前頁碼小於總頁數，便可執行翻頁
                        if (pullUpEl.attr('class').match('flip|loading')) {  
                            pullUpEl.removeClass('flip').addClass('loading');  
                            pullUpL.html('正在加載...');  
                            loadingStep = 2;
                            _this.pullUpAction();
                        } 
                    }                    
                }                
            
            });
            
            if(this.stopClick){
                $("#downwraper").bind("click",function(){
                    _this.getData(1,true);
                });
            } 
            //第一次初始化數據
            this.getData(1);
        },
        _getDataClick:function(){
            this.getData(1,true);
        },    
        _setOptionStopDown:function(ot){
            this.stopDownMod = ot;
        },
        loadRefresh:function(){
            strScroll.refresh();
        },
        pullDownAction:function(){
            var _this = this;
            setTimeout(function() {
                _this.getData(1,true);
            }, 1000); 
        },        
        pullUpAction:function(){
            var _this = this;
            setTimeout(function() {
                _this.getData(curpage+1);
            }, 1000); 
        },
        pullDownGetData:function(){
            pullDownEl.removeClass('loading');  
            pullDownL.html('下拉顯示更多...');  
            pullDownEl['class'] = pullUpEl.attr('class');  
            pullDownEl.attr('class','').hide(); 
        },
        pullUpGetData:function(){
            pullUpEl.removeClass('loading');  
            pullUpL.html('上拉顯示更多...');  
            pullUpEl['class'] = pullUpEl.attr('class');  
            pullUpEl.attr('class','').hide();  
        },
        getNoData:function(){
            var _that = this;
            $.ajax({
                'url':_that.options.pageNoUrl,
                'type':'GET',
                'dataType':'json',
                success:function(data){
                    if(data.status==1){
                        _that.options.pageCondition = data.condition_str;
                        $("#downwraper").unbind();
                    }else{
                        $("#downwraper").bind("click",function(){
                            _that.getData(1,true);
                        });
                        //$.AlertBox({title:'沒有數據了'});
                    }
                }
            });
        },
        getData:function(pg,up){
            var _that = this;
            curpage = pg;
            $.ajax({
                'url':_that.options.pageUrl+'?str='+_that.options.pageCondition+'&page='+pg,
                'type':'GET',
                'dataType':'html',
                'data':'',
                beforeSend:function(){
                    if(curpage==1) {
                        $(".fixedbg").fadeIn(100);                    
                        $("#datalist").append("<div class='loading'></div>");
                    }
                },
                success:function(strHtml){
                    $('#datalist .loading').remove();
                    $(".fixedbg").fadeOut(100);
                    if(up){
                        $("#datalist").html(strHtml);
                    }else{
                        $("#datalist").append(strHtml);
                    }
                    _that.pullUpGetData();
                    _that.pullDownGetData();
                    loadingStep = 0;
                    if(typeof(_that.options.callback)=="function"){
                        _that.options.callback();
                    }
                    strScroll.refresh(); 
                    //應該放到用到的頁面中,在回調函數中調用^-^!.
                    iconLoad();//info load icon                        
                    //
                },
                error:function(){

                }
            });
        }    
    };
    window.Loadlist = Loadlist;
}());
</script>

 參考：http://www.w2bc.com/Article/49414