加载中...
当前位置:首页 > 日记 > 正文

iscroll动态加载数据完美解决方法

iscroll动态加载数据完美解决方法

本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下

<div id="wrapper" class="margin-b90">    <div id="scroller">      <div id="pullDown">        <span class="pullDownLabel" style="text-align: center;">加载中...</span>      </div>      <div class="sps_itemBox ">        <div class="list_show">          <ul id="ulList"></ul>        </div>      </div>      <div id="pullUp">        <span class="pullUpLabel" style="text-align: center;">上拉加载...</span>      </div>    </div>  </div>

js.

// iScroll 滚动条/上拉刷新/下拉加载var myScroll,pullDownEl,pullDownOffset,pullUpEl,pullUpOffset;function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp');pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll('wrapper', {useTransition: false,topOffset: pullDownOffset,btnOffset: pullUpOffset,hideScrollbar: true,fadeScrollbar: true,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间:' + updateDatetime;} else if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载...';}},onScrollMove: function () {if (this.y > 5 && !pullDownEl.className.match('flip')) {pullDownEl.className = 'flip';//pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新...';pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间:' + updateDatetime;this.minScrollY = 0;} else if (this.y < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间:' + updateDatetime;this.minScrollY = -pullDownOffset;} else if (this.y < (this.maxScrollY - pullUpOffset - 40) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载...';this.maxScrollY = this.maxScrollY - pullUpOffset;}//else if (this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {// pullUpEl.className = '';// pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载...';// //this.maxScrollY = pullUpOffset;/

相关文章

javascript 日期相减-在线教程 |

javascript 日期相减-在线教程 |

日期,代码,在线教程,相减,电脑软件,代码如下:<script LANGUAGE="JavaScript"> <!-- //说明:这里用了Math.ceil()函数,向上取整,即零头算一天,^_^ var strDate1 = "2003-06-17 03:03:40.0"; var strDate2 = "2004-09-18 12:03:12.0"; s…

关于JavaScript中forEach和each用

关于JavaScript中forEach和each用

电脑软件,JavaScript,forEach,本文主要给大家介绍了关于JavaScript中forEach和each的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如:var arr = [1,2,3,4];arr.fo…

wps表格如何移动单元格

wps表格如何移动单元格

方法,单元格,表格,电脑软件,wps,  在使用wps办公软件制作表格时,有时由于自己的疏忽大意,可能忘记了还有其它选项需要添加,这个时候就需要考虑下移单元格了,那么wps表格如何下移单元格呢?接下来小编就给大家介绍一种移动单元格的方法。wps表…

qq空间访问设置在哪里

qq空间访问设置在哪里

空间,设置,访问权限,途径,电脑软件,  qq空间访问权限设置在哪里?很多朋友希望自己的空间内容只让好友或者是最亲密的人看到,这个时候就需要设置QQ空间的访问权限,来控制那些人可以看到自己空间的内容。今天小编分享了设置qq空间访问权限的…

WPS表格2013自动计分出题的模板怎

WPS表格2013自动计分出题的模板怎

模板,表格,试题,积分,电脑软件,  出试题,评分在上学的时候,都是老师要做的事。WPS表格2013不但可以制作自动出题,还可以制作自动积分的试题。以下是小编为您带来的关于WPS表格2013制作自动出题自动积分的试题,希望对您有所帮助。WPS表格2013…

cdr表格怎么制作? cdr调整表格的教

cdr表格怎么制作? cdr调整表格的教

教程,调整,表格,电脑软件,cdr,用CorelDRAW制作有表格的图片真方便,下面我们就来看看实例教程。软件名称:CorelDRAW X4 简体中文正式破解安装版(附注册序列号)软件大小:97MB更新时间:2016-05-161、创建表格,表格内双击,输入文字信息内容2、选中表…

QQ空间日志和说说怎么转发到微信朋

QQ空间日志和说说怎么转发到微信朋

转发,空间,日志,微信朋友圈,电脑软件,  QQ空间日志和说说怎么转发到微信朋友圈?很多人把QQ空间里的日志转发到微信的朋友圏,以增加更多人阅读。那么是如何转发的呢,下面跟着小编一起来看看吧~欢迎大家前来阅读!QQ空间日志和说说怎么转发到…

Javascript es7中比较实用的两个方

Javascript es7中比较实用的两个方

方法,示例,两个,电脑软件,Javascript,本文主要跟大家介绍了关于es7中两个比较实用的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:一、、operator (求幂运算符)**console.log(2**3);//8console.log(4**4);//256//以往的写法…

PS怎么镜头校正滤镜调整?

PS怎么镜头校正滤镜调整?

调整,滤镜,电脑软件,PS,和大家分享一下镜头校正滤镜的使用。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先打开一张风景图片。2、&ldquo;滤镜&rdquo;-&ldquo;扭曲&rdquo;-&ldquo;镜头校正&rdqu…

如何用免费的QQ空间音乐

如何用免费的QQ空间音乐

音乐,空间,如何用,电脑软件,QQ,  很多人都想知道怎么去设置属于自己的QQ空间音乐,但是很多空间音乐都需要会员才能设置,其实对于普通用户,我们自己也可以设置自己想要的音乐,简单,无花费,现在小编为大家简单介绍一下.如何用免费的QQ空间音乐 …

ps怎么设计抖音软件的logo?

ps怎么设计抖音软件的logo?

电脑软件,ps,logo,喜欢玩抖音软件,想要设计抖音软件的lo,该怎么绘制呢?下面我们就来看看ps绘制的教程,请看下文详细教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建一个文件,如图所示,然后使用钢…

BootStrap模态框和select2合用时in

BootStrap模态框和select2合用时in

获取焦点,解决方法,模态框,电脑软件,BootStrap,在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.解决方法:1.把页面中的 tabindex="-1" 删掉(测试成功):<div id="myModal" class="m…

软件日记