iscroll5 上拉，下拉 加载数据

时间：2022-10-27 22:19:58
我这里的思路是上拉时候只是加载第一页的内容，可根据实际情况修改其中的代码。请勿照搬。样式没怎么调，可以加载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 &amp&semi; FMX 那些年我们一起上过的控件：ListView 之 &lpar;3&rpar; 加载数据时如何显示自定义样式

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

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

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

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

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

  5. 向上滚动或者向下滚动分页异步加载数据&lpar;Ajax &plus; lazyload&rpar;&lbrack;上拉加载组件&rsqb;

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

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

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

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

    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 动态加载数据出现的问题处理 &lpar;silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据&rpar;

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

随机推荐

  1. web应用动态文档技术

    动态生成web文档分为服务器动态生成.客户端动态生成 服务器动态生成文档技术主要有: CGI - 公共网关接口,它是一个允许Web服务器与后端程序以及脚本进行通信的标准化接口.通常是web服务器收到一 ...

  2. autoit 使用excel自带函数操作excel

    Looking into the includes <Excel.au3> helped shed some light on things. To summarize what I've ...

  3. JS实现设为首页与加入收藏

    <script type="text/javascript"> // 设置为主页 function SetHome(obj, vrl) { try { obj.styl ...

  4. c&plus;&plus;map的用法 分类： POJ 2015-06-19 18&colon;36 11人阅读 评论&lpar;0&rpar; 收藏

    c++map的用法 分类: 资料 2012-11-14 21:26 10573人阅读 评论(0) 收藏 举报 最全的c++map的用法 此文是复制来的0.0 1. map最基本的构造函数: map&l ...

  5. 如何通过 OAuth 2&period;0 使 iOS Apps 集成 LinkedIn 登录功能？

    社交网络早已成为人们日常生活的一部分.其实,社交网络也是编程生活的一部分,大多数 App 必须通过某种方式与社交网络交互,传送或接收与用户相关的数据.大多数情况下,用户需要登录某种社交网络,授权 Ap ...

  6. 如何退出Activity？如何安全退出已调用多个Activity的Application？

    如何退出Activity?如何安全退出已调用多个Activity的Application? 退出Activity直接调用finish()方法  //用户点击back键就是退出一个Activity 退出 ...

  7. 生活常用类API调用的代码示例合集：邮编查询、今日热门新闻查询、区号查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 邮编查询:通过邮编查询地名:通过地名查询邮编 今日热门新闻查询:提 ...

  8. 各种15min（启动、横盘、破位）样例

    15min-m20=day m1.5 15min-m60=day m5 15min-m125=day m10 15min-m260=day m20 1.2017年6月8日 360  + 2018年11 ...

  9. grep&comma;find

    grep是强大的文本搜索工具,他可以对文件逐行查看,如果找到匹配的模式,就可以打印出包含次模式的所有行,并且支持正则表达式 find查找文件的grep是来查找字符串的,文件的内容 grep 文件的内容 ...

  10. Object类有哪些方法

    Object是所有类的父类,任何类都默认继承Object.Object类到底实现了哪些方法? 1．clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否则抛出 ...

相关文章