基于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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
VUE实现日历组件功能
Mar 13 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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 第二节 数据类型之字符串类型
2012/04/28 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
javaScript语法总结
2016/11/25 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python切片工具pillow用法示例
2018/03/30 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
在线课程:Skillshare
2019/04/02 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
教师专业自荐信
2014/05/31 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript