标签：
我这里的思路是上拉时候只是加载第一页的内容，可根据实际情况修改其中的代码。请勿照搬。样式没怎么调，可以加载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>
//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; }());
标签：
原文地址：http://www.cnblogs.com/skmtpsh/p/4633802.html
