基于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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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
php curl模拟post请求小实例
2013/11/13 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Python base64编码解码实例
2015/06/21 Python
不可错过的十本Python好书
2017/07/06 Python
遗传算法之Python实现代码
2017/10/10 Python
Python中的集合介绍
2019/01/28 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
PyTorch预训练的实现
2019/09/18 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python求解汉诺塔游戏
2020/07/09 Python
护理专业推荐信
2013/11/07 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
小学语文课后反思精选
2014/04/25 职场文书
文明寝室申报材料
2014/05/12 职场文书
销售活动策划方案
2014/08/26 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
行政助理岗位职责
2015/02/10 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android