我这里的思路是上拉时候只是加载第一页的内容，可根据实际情况修改其中的代码。请勿照搬。样式没怎么调，可以加载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. 顶点着色器详解 (Vertex Shaders)

    学习了顶点处理,你就知道固定功能流水线怎么将顶点从模型空间坐标系统转化到屏幕空间坐标系统.虽然固定功能流水线也可以通过设置渲染状态和参数来改变最终输出的结果,但是它的整体功能还是受限.当我们想实现一个 ...

  2. 使用oh-my-zsh后导致的卡顿问题

    现象是每次cd和ll时都会被卡住很长时间根本受不了,最后在官方github查明原因是使用的主题会自动获取git信息,可以使用以下命令禁止zsh自动获取git信息,解决卡顿问题 git config - ...

  3. Android Studio开发基础之自定义View组件

    一般情况下,不直接使用View和ViewGroup类,而是使用使用其子类.例如要显示一张图片可以用View类的子类ImageView,开发自定义View组件可分为两个主要步骤: 一.创建一个继承自an ...

  4. android 常见分辨率（mdpi、hdpi 、xhdpi、xxhdpi ）及屏幕适配注意事项

    1 Android手机目前常见的分辨率 1.1 手机常见分辨率: 4:3VGA     640*480 (Video Graphics Array)QVGA  320*240 (Quarter VGA ...

  5. 使用SVN时出现的文件缺失问题

    使用SVN的童鞋们,可能有三种提交代码的方法: 第一种使用客户端(例如SVNX,CornerStone): 第二种使用Xcode提交(Source Control -> commit): 第三种 ...

  6. 关于BaseExpandableListAdapter

    首先要明确,可折叠列表在每个项是包含子项的,那么肯定会用到集合嵌套!下面是封装的两个实体类: package com.yx.pojo;public class Chid {        privat ...

  7. expense KK [ɪkˋspɛns] DJ [iksˋpens]

    https://tw.dictionary.yahoo.com/dictionary?p=expense expense 1 Dr.eye譯典通   KK [ɪkˋspɛns] DJ [iksˋpen ...

  8. 自定义View（二）增加View的属性

    增加View的属性有两种方法    1.在View类中添加    2.在xml资源文件中添加 一.在View类中添加    例:实现一个带文字的图片 public class MyView exten ...

  9. mysql学习(1)-linux操作系统源码包安装

    背景: CentOS 6.4下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版本的5.6.22. 正文: 一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server ...

  10. asp.net Word Document Open return null