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

转载于:https://www.cnblogs.com/skmtpsh/p/4633802.html

iscroll5 上拉，下拉加载数据相关推荐

Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
ios 平滑移动view_iOS 关于列表上拉（平滑加载数据）自动加载数据的问题
项目需求我的的列表需要改变,原来的分页加载采用的是MJRefresh框架进行加载更多数据,这需要有一个上拉动作才能触发,而我的产品的意思是当快要滑动到底部时自动加载下一页数据.我自己看了一下,发现很 ...
【实例】使用jquery自带的slideToggle由上到下缓缓加载图片
引出上一篇博文是使用canvas逐条输出像素来实现从上到下缓缓输出图片,今天睡了一晚,想起以前学jquery的时候原版的库中就有显示和隐藏的方法.而且相当于canvas显示图片,jquery是相对简 ...
css从上到下逐渐加载,css制作从下往上逐渐显示的div
html代码我是div顶部其中div1是整个容器,div2是需要从下往上显示的div.如果只是改变height高度的话,会导致div从上往下慢慢显示,所以并不能直接设置div2的高度来达成效果,此 ...
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...
AngularJS封装指令实现下拉刷新自动翻页加载数据
目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下. 滚动翻页基本原理就是判断scrollTop和offsetHeight之和大于等于 scrollHeight. 一.不适用Jqu ...
下拉加载实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果
[Java教程]iscroll5实现一个下拉刷新上拉加载的效果 0 2016-08-24 15:00:08 直接上代码!!! * { margin: 0; padding: 0; } ul, li { ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...

iscroll5 上拉，下拉加载数据

iscroll5 上拉，下拉加载数据相关推荐

最新文章

热门文章

iscroll5 上拉，下拉 加载数据

iscroll5 上拉，下拉 加载数据相关推荐

最新文章

热门文章

iscroll5 上拉，下拉加载数据

iscroll5 上拉，下拉加载数据相关推荐