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">&#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;
}());

posted on 2015-07-09 17:38 青岛米柚阅读(611) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

柚米文化