上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码。
<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