基于iScroll实现下拉刷新和上滑加载效果


Posted in Javascript onJuly 18, 2017

本文实例为大家分享了iScroll下拉刷新上滑加载展示的具体代码,供大家参考,具体内容如下

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; maximum-scale=1.0;" /> 
<title>iScroll下拉刷新上滑加载</title> 
<link rel="stylesheet" href="style/main.css"/> 
</head> 
<body> 
 
<div class="header">header</div> 
<div id="wrapper"> 
 <div id="scroller"> 
 <div id="pullDown"> 
  <span class="pullDownLabel">下拉刷新</span> 
 </div> 
 <ul id="thelist"> 
  <!--<li>原始数据</li>--> 
 </ul> 
 <div id="pullUp"> 
  <span class="pullUpLabel">上拉加载更多</span> 
 </div> 
 </div> 
</div> 
<div class="footer">footer</div> 
 
<script type="text/javascript" src="script/iscroll.js"></script> 
<script type="text/javascript" src="script/main.js"></script> 
 
</body> 
</html>

css代码:

body,ul,li {padding:0;margin:0;border:0} 
body {font-size:12px;font-family:microsoft yahei} 
 
.header {position:absolute;top:0; left:0;width:100%;height:45px;line-height:45px;font-size:16px;text-align:center;background:#e6e6e6} 
.footer {position:absolute;bottom:0; left:0;width:100%;height:48px;line-height:48px;font-size:16px;text-align:center;background:#e6e6e6} 
 
#wrapper {position:absolute;top:45px; bottom:48px;left:0;width:100%} 
#scroller li {padding:0 10px;height:60px;line-height:60px;background:#ecf6ff;margin-top:10px} 
#pullDown, #pullUp {padding:0 10px;height:30px;line-height:30px;color:#888;text-align:center}

js代码:

var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 0; 
 
function loaded() { 
 //动画部分 
 pullDownEl = document.getElementById('pullDown'); 
 pullDownOffset = pullDownEl.offsetHeight; 
 pullUpEl = document.getElementById('pullUp'); 
 pullUpOffset = pullUpEl.offsetHeight; 
 myScroll = new iScroll('wrapper', { 
 useTransition: true, 
 topOffset: pullDownOffset, 
 onRefresh: function () { 
  if (pullDownEl.className.match('loading')) { 
  pullDownEl.className = ''; 
  pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新'; 
  } 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 = '释放刷新'; 
  this.minScrollY = 0; 
  } else if (this.y < 5 && pullDownEl.className.match('flip')) { 
  pullDownEl.className = ''; 
  pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; 
  this.minScrollY = -pullDownOffset; 
  } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { 
  pullUpEl.className = 'flip'; 
  pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新'; 
  this.maxScrollY = this.maxScrollY; 
  } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { 
  pullUpEl.className = ''; 
  pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...'; 
  this.maxScrollY = pullUpOffset; 
  } 
 }, 
 onScrollEnd: function () { 
  if (pullDownEl.className.match('flip')) { 
  pullDownEl.className = 'loading'; 
  pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中';   
  pullDownAction(); // Execute custom function (ajax call?) 
  } else if (pullUpEl.className.match('flip')) { 
  pullUpEl.className = 'loading'; 
  pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';   
  pullUpAction(); // Execute custom function (ajax call?) 
  } 
 } 
 }); 
 
 loadAction(); 
} 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止冒泡 
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 0); }, false); 
 
//初始状态,加载数据 
function loadAction(){ 
 var el, li; 
 el = document.getElementById('thelist'); 
 for (i=0; i<10; i++) { 
 li = document.createElement('li'); 
 li.innerText = '初始数据--' + (++generatedCount); 
 el.appendChild(li, el.childNodes[0]); 
 } 
 myScroll.refresh(); 
} 
 
//下拉刷新当前数据 
function pullDownAction () { 
 setTimeout(function () { 
 //这里执行刷新操作 
  
 myScroll.refresh(); 
 }, 400); 
} 
 
//上拉加载更多数据 
function pullUpAction () { 
 setTimeout(function () { 
 var el, li; 
 el = document.getElementById('thelist'); 
 for (i=0; i<10; i++) { 
  li = document.createElement('li'); 
  li.innerText = '上拉加载--' + (++generatedCount); 
  el.appendChild(li, el.childNodes[0]); 
 } 
 myScroll.refresh(); 
 }, 400); 
}

示例:

demo地址:http://test.ixiewei.com/iscroll-4-demo

下载地址:iScroll下拉刷新上滑加载

截图:

基于iScroll实现下拉刷新和上滑加载效果

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

Javascript 相关文章推荐
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
javascript如何写热点图
Dec 08 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
利用js编写网页进度条效果
Oct 08 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 #Javascript
iscroll动态加载数据完美解决方法
Jul 18 #Javascript
Angular4学习笔记之新建项目的方法
Jul 18 #Javascript
详解使用nvm安装node.js
Jul 18 #Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python中return语句用法实例分析
2015/08/04 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
见习期自我鉴定
2014/01/31 职场文书
优秀教师工作感言
2014/02/16 职场文书
年会主持词结束语
2014/03/27 职场文书
《故乡》教学反思
2014/04/10 职场文书
校园元旦活动总结
2014/07/09 职场文书
公务员考察材料
2014/12/23 职场文书
劳资员岗位职责
2015/02/13 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
六年级作文之自救
2019/12/19 职场文书
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android