我这里的思路是上拉时候只是加载第一页的内容，可根据实际情况修改其中的代码。请勿照搬。样式没怎么调，可以加载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. CC1310电源管脚

    对于48pin脚的CC1310而言,属于电源类的管脚如下: 上述电源类管脚的关系如下: 1 VDDS类管脚 VDDS类管脚包括VDDS.VDDS2.VDDS3和VDDS_DCDC四个管脚.其中VDDS ...

  2. 使用新浪云 Java 环境搭建一个简单的微信处理后台

    前一段时间,写了一篇在新浪云上搭建自己的网站的教程,通过简单构建了一个 maven 的项目,展示部署的整个流程,具体的操作可以参看这里. 新浪云服务器除了可以搭建自己的网站以外,也非常的适合作为微信公 ...

  3. web.py+html+mysql实现web端小系统的问题汇总

    利用web.py+html(bootstrap)+mysql实现了一个小型的设备管理系统,在这个过程中遇到很多问题,将问题及解决方案总结如下,有遇到类似问题的同学,希望可以帮到你们. 1.关于中文的编 ...

  4. MVC Html.ValidationSummary()样式优化

    先看效果图 在MVC中常用ValidationSummary显示校验信息,默认样式为 针对Html.ValidationSummary()如何做优化 样式一: 在MVC中,如果你使用验证总结方法任何验 ...

  5. Eclipse里面的一些常规设置

    一.Eclipse里面的默认编码是GBK,但是Android开发的编码都是UTF-8,所以一定要修改自己的工程的编码,不要坑队友哦~ (1)选中当前的工程,点击右键,如图选择(这只是改变当前工程的编码 ...

  6. genymotion不能联网

    1.打开Oracle VM Virtual Box,选中相应的虚拟机,点击上侧工具栏中的『设置』: 2.选择『网络』,接着将: 网卡1的连接方式设置为仅主机(Host-Only)适配器: 将网卡2设置 ...

  7. 我 && yii2(日志埋点，邮件提醒)

    今天试着把yii2 的日志,如果发送邮件的形式实现,具体实现如下 1.环境介绍 lnmp php5.6, mysql5.5, lnmp1.2 yii2-advanced 2.配置文件的编写 在fron ...

  8. sql server 还原数据库后，删除用户，提示数据库主体在该数据库中拥有架构，无法删除解决方法

    将另一台服务器上的数据库备份文件,在现在用的这台服务器上还原之后,再创建相同的用户名,提示用户已存在 想将之前的用户先删除掉,却提示“数据库主体在该数据库中拥有架构,无法删除解决方法” 在网上找到方法 ...

  9. SQLServer idenity 字段跳值

    修改数据库实例的启动参数 然后修改SQLServer启动参数,打开SQLServer configuration manager,然后选择服务实例,点击右键属性,查看实例的属性界面,然后启动参数选项输 ...

  10. Android.mk 基本应用

    如果是在android源码里面编译我们自己的应用,就需要这个android.mk文件,这个文件就告诉android系统应用如何来编译这个应用以及这个应用它所依赖哪些文件等等信息.我对android.m ...