码迷,mamicode.com
首页 > 其他好文 > 详细

iscroll5 上拉,下拉 加载数据

时间:2015-07-09 19:23:54      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:

我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码。请勿照搬。样式没怎么调,可以加载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">&#x6d;</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">&nbsp;</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; }());

 

iscroll5 上拉,下拉 加载数据

标签:

原文地址:http://www.cnblogs.com/skmtpsh/p/4633802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!