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 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
yii2安装详细流程
2018/05/23 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
基于vue.js组件实现分页效果
2018/12/29 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python简单基础小程序的实例代码
2019/04/28 Python
python绘制规则网络图形实例
2019/12/09 Python
python的slice notation的特殊用法详解
2019/12/27 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
刘胡兰的英雄事迹材料
2014/02/11 职场文书
模特大赛策划方案
2014/05/28 职场文书
保护动物的标语
2014/06/11 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python