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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
浅谈document.write()输出样式
May 07 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
JpGraph php柱状图使用介绍
2011/08/23 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php 可变函数使用小结
2018/06/12 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
HTML5等待加载动画效果
2017/07/27 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
大专护理专业自荐信
2015/03/25 职场文书
小学工作总结2015
2015/05/04 职场文书
人工作失职检讨书
2015/05/05 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
少先队中队工作总结
2015/08/14 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL