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


Posted in Javascript onJuly 18, 2017

本文实例为大家分享了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;
//}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
//pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据刷新中...';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '数据更新时间:' + updateDatetime;
myScroll.refresh();
} else if (pullUpEl.className.match('flip')) { 
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '数据加载中...';
setTimeout(function () { myScroll.refresh(); }, 3000);

}
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

css

/* iScroll */
#wrapper{width:100%; position:absolute; top:0; bottom:0; z-index:1; overflow:hidden;}
#scroller{
  width:100%; position:absolute; z-index:1;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0);
}
#pullDown,
#pullUp{padding:15px 0 15px 60px; font-size:14px; line-height:27px; color:#303030;}
#pullDown{background:url(../images/loadBottom.png) no-repeat 30px center; background-size:27px 27px;}
#pullUp{background:url(../images/loadTop.png) no-repeat 30px center; background-size:27px 27px;}
#pullDown.flip{background:url(../images/loadTop.png) no-repeat 30px center; background-size:27px 27px;}
#pullUp.flip{background:url(../images/loadBottom.png) no-repeat 30px center; background-size:27px 27px;}
#pullDown.loading,
#pullUp.loading{background:url(../images/loading.gif) no-repeat 30px center; background-size:25px 27px;}
/* iScroll end */

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 #Javascript
详解使用nvm安装node.js
Jul 18 #Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 #Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 #Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 #Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
You might like
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
php中关于换行的实例写法
2019/09/26 PHP
js DOM的学习笔记
2011/12/22 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
安全生产检讨书
2014/01/21 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
旷课检讨书
2015/01/26 职场文书
辞职书格式样本
2015/02/26 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js