我这里的思路是上拉时候只是加载第一页的内容，可根据实际情况修改其中的代码。请勿照搬。样式没怎么调，可以加载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">&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 上拉，下拉 加载数据的更多相关文章

  1. mui前端框架下拉刷新分页加载数据

    前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...

  2. XE7 & FMX 那些年我们一起上过的控件：ListView 之 (3) 加载数据时如何显示自定义样式

    本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...

  3. iscroll5 版本下的 上拉，下拉 加载数据

    上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...

  4. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  5. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  6. 分页插件思想：pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  7. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  8. 自己定制ListView，上拉刷新和下拉刷新，加载网络图片，并且添加缓存机制。

    package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...

  9. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

随机推荐

  1. Git项目存放位置在导入Eclipse前不能存放在Eclipse Workspace

    这篇帖子的背景: 本人想将一个git项目导入至Eclipse的Workspace中,并且该项目的所有git信息.但是,该git项目在导入之前,就已经存放在Eclipse的Workspace中.在将该g ...

  2. MySQL的存储引擎

    MySQL的一个重要特性就是支持插件式存储引擎.其存储引擎接口定义良好,有兴趣的开发者可以通过阅读文档编写自己的存储引擎. 接下来简单介绍一下MySQL的常见存储引擎: 一.MyISAM MySQL ...

  3. 自动验证是ThinkPHP

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 数据验证有两种方式: 静态方式:在模型类里面通过$_validate属性定义验证规则 ...

  4. 自动生成查找组件的lua代码

    本篇主要解决的问题是使用lua脚本编写unity业务逻辑时,自动生成一些查找组件及绑定控件事件的lua代码! 现在很多unity项目都是用ulua作为热更新解决方案,因此需要用lua来写相关的逻辑,经 ...

  5. gulp LiveReload middleware

    用yo搭建的angular项目,用gulp自动化构建. 自动化构建主要的功能大致有: 1. 文件压缩 2. 文件重命名 3. 文件合并 4. css,js文件自动引入到html 5. 自动刷新 ... ...

  6. Nginx-->基础-->理论-->nginx进程模型

    一.nginx的进程模型基础 如上图,是nginx的基本进程模型. 1.nginx的master进程与worker进程关系 nginx的master进程负责worker进程的管理,包括创建worker ...

  7. ABAP 动态内表添加单元格颜色字段

    *动态内表alv显示时要求某些单元格显示颜色 *wa_fldcat-datatype不能添加LVC_T_SCOL类型,在创建好内表之后,再添加颜色列. DATA: wa_fldcat TYPE lvc ...

  8. Windows10

    一.快速开机设置 我的电脑配置如图,装有VS2015 2010 OFFICE等常用开发工具,在线升级后开机速度并没有明显提升. 1.保证windows font cache service服务启动,3 ...

  9. 帮助对@Repository注解的理解

    定义(来自Martin Fowler的<企业应用架构模式>): Mediates between the domain and data mapping layers using a co ...

  10. 【windows 下安装 mysql-server 无法登录问题解决】

    ----------------------------- 无感的首行 ----------------------------- 新版 mysql-server 5.7 安装后发现无法使用 mysq ...