iscroll5 上拉，下拉 加载数据
生活随笔
收集整理的這篇文章主要介紹了
iscroll5 上拉，下拉 加载数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我這里的思路是上拉時候只是加載第一頁的內容，可根據實際情況修改其中的代碼。請勿照搬。樣式沒怎么調，可以加載gif動畫。
1.沒有數據時候，下拉可以加載數據。
2.沒有數據時候，點擊也可以加載數據。
3.其余正常。
4.只要頁面沒有 <div id="pullDown"><div class="pullDownLabel">正在加載中...</div></div>
這段代碼就不會執行下拉加載數據。
//沒有上拉時候用到的html <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>財務返費</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<link href="../css/my.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script><!--替換為zepto.js-->
<script type="text/javascript" src="../js/iscroll.js"></script>
<script type="text/javascript" src="../js/base.js"></script>?? ?
</head>
<body>
<header class="header bgno">
?? ?<div class="top">
??????? <a href="javascript:history.back()" class="back"></a>
??????? <h1 class="title">活動資金</h1>?? ?
??? </div>
?? ?<div class="mybox">
?? ??? ?<div class="acinfo">
?? ??? ??? ?<div class="disbox">
?? ??? ??? ??? ?<div class="info disbox-1">
?? ??? ??? ??? ??? ?<p class="f16">可提現金額(元)</p>
?? ??? ??? ??? ??? ?<p class="orange f18">0.00</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<span><i class="icon orange f36">m</i></span>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
?? ?<nav class="navTop mgt10">
?? ??? ?<ul>
?? ??? ??? ?<li class="selected">
?? ??? ??? ??? ?<a href="#" class="nava"><div class="area">所有</div></a>
?? ??? ??? ?</li>
?? ??? ??? ?<li>
?? ??? ??? ??? ?<a href="#" class="nava"><div class="area">收入</div></a>
?? ??? ??? ?</li>
?? ??? ??? ?<li>
?? ??? ??? ??? ?<a href="#" class="nava"><div class="area">支出</div></a>
?? ??? ??? ?</li>?? ??? ??? ??? ?
?? ??? ?</ul>
?? ?</nav>?? ?
</header>
<section id="downwraper" class="normal bot0 top2 ">
??? <div id="downscroller">
?? ??? ?<div class="ntot right"><p class="black">共 <var class="red">51</var> 條凍結資金</p></div>
?? ??? ?<div id="datalist">
?? ??? ?</div>
?? ??? ?<div id="pullUp"> ?
?? ??? ??? ?<div class="pullUpLabel">上拉顯示更多...</div> ?
?? ??? ?</div>
??? </div>
</section>
<div class="fixedbg"> </div>
<script>
??? var page_data_url = 'data-huodong.html';
??? var condition_str = '';
??? var page_count =5;
?
?? ?$(function(){
?? ??? ?//加載
?? ??? ?var loadlist = new Loadlist({'pageUrl':page_data_url,'pageCondition':condition_str,'pageCount':page_count});
?? ??? ?loadlist.loaded();
?
?? ??? ?
?? ?});
?? ?
</script>
</body>
</html>
//上拉時候用到的html: <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>
<script>
//上拉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>
//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(); },error:function(){}});} };window.Loadlist = Loadlist; }());
1.沒有數據時候，下拉可以加載數據。
2.沒有數據時候，點擊也可以加載數據。
3.其余正常。
4.只要頁面沒有 <div id="pullDown"><div class="pullDownLabel">正在加載中...</div></div>
這段代碼就不會執行下拉加載數據。
//沒有上拉時候用到的html <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>財務返費</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<link href="../css/my.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script><!--替換為zepto.js-->
<script type="text/javascript" src="../js/iscroll.js"></script>
<script type="text/javascript" src="../js/base.js"></script>?? ?
</head>
<body>
<header class="header bgno">
?? ?<div class="top">
??????? <a href="javascript:history.back()" class="back"></a>
??????? <h1 class="title">活動資金</h1>?? ?
??? </div>
?? ?<div class="mybox">
?? ??? ?<div class="acinfo">
?? ??? ??? ?<div class="disbox">
?? ??? ??? ??? ?<div class="info disbox-1">
?? ??? ??? ??? ??? ?<p class="f16">可提現金額(元)</p>
?? ??? ??? ??? ??? ?<p class="orange f18">0.00</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<span><i class="icon orange f36">m</i></span>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
?? ?<nav class="navTop mgt10">
?? ??? ?<ul>
?? ??? ??? ?<li class="selected">
?? ??? ??? ??? ?<a href="#" class="nava"><div class="area">所有</div></a>
?? ??? ??? ?</li>
?? ??? ??? ?<li>
?? ??? ??? ??? ?<a href="#" class="nava"><div class="area">收入</div></a>
?? ??? ??? ?</li>
?? ??? ??? ?<li>
?? ??? ??? ??? ?<a href="#" class="nava"><div class="area">支出</div></a>
?? ??? ??? ?</li>?? ??? ??? ??? ?
?? ??? ?</ul>
?? ?</nav>?? ?
</header>
<section id="downwraper" class="normal bot0 top2 ">
??? <div id="downscroller">
?? ??? ?<div class="ntot right"><p class="black">共 <var class="red">51</var> 條凍結資金</p></div>
?? ??? ?<div id="datalist">
?? ??? ?</div>
?? ??? ?<div id="pullUp"> ?
?? ??? ??? ?<div class="pullUpLabel">上拉顯示更多...</div> ?
?? ??? ?</div>
??? </div>
</section>
<div class="fixedbg"> </div>
<script>
??? var page_data_url = 'data-huodong.html';
??? var condition_str = '';
??? var page_count =5;
?
?? ?$(function(){
?? ??? ?//加載
?? ??? ?var loadlist = new Loadlist({'pageUrl':page_data_url,'pageCondition':condition_str,'pageCount':page_count});
?? ??? ?loadlist.loaded();
?
?? ??? ?
?? ?});
?? ?
</script>
</body>
</html>
//上拉時候用到的html: <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>
<script>
//上拉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>
?//css
?
/*iscroll {*/
#wrapper,
#citywraper,
#selectwraper,
#telwraper,
#downwraper,
#aboutwraper,
#allwraper {
?? ?position: absolute;
?? ?z-index: 1;
?? ?top: 48px;
?? ?bottom: 67px;
?? ?left: 0;
?? ?width: 100%;
?? ?overflow: hidden;
}
#wrapper.normal,#downwraper.normal {top:90px;}
#downwraper.bot0,#wrapper.bot0,#aboutwraper.bot0 {bottom: 0;}
#downwraper.top372,#wrapper.top372 {top:372px;}
#downwraper.top250,#wrapper.top250 {top:250px;}
#downwraper.top276,#wrapper.top276 {top:276px;}
#downwraper.top348,#wrapper.top348 {top:348px;}
#downwraper.top {top:157px;}
#downwraper.top2 {top:183px;}
#allwraper {top:88px; bottom:116px; z-index:3000; background:#fff;}
#scroller,
#telscroller,
#selectscroller,
#cityscroller,
#downscroller,
#aboutscroller,
#allscroller? {
?? ?position: absolute;
?? ?z-index: 1;
?? ?-webkit-tap-highlight-color: rgba(0,0,0,0);
?? ?width: 100%;
?? ?-webkit-transform: translateZ(0);
?? ?-moz-transform: translateZ(0);
?? ?-ms-transform: translateZ(0);
?? ?-o-transform: translateZ(0);
?? ?transform: translateZ(0);
?? ?-webkit-touch-callout: none;
?? ?-webkit-user-select: none;
?? ?-moz-user-select: none;
?? ?-ms-user-select: none;
?? ?user-select: none;
?? ?-webkit-text-size-adjust: none;
?? ?-moz-text-size-adjust: none;
?? ?-ms-text-size-adjust: none;
?? ?-o-text-size-adjust: none;
?? ?text-size-adjust: none;
}
/*}*/
?
//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(); },error:function(){}});} };window.Loadlist = Loadlist; }());
?
轉載于:https://www.cnblogs.com/skmtpsh/p/4633802.html
總結
以上是生活随笔為你收集整理的iscroll5 上拉，下拉 加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。
