基于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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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开启gzip页面压缩实例
2013/06/09 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
PyQT实现多窗口切换
2018/04/20 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
入党申请书自我鉴定
2013/10/12 职场文书
校长岗位职责
2013/11/26 职场文书
高中化学教学反思
2014/01/13 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
协议书范本
2014/04/23 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
实习生个人总结范文
2015/02/28 职场文书
《学会看病》教学反思
2016/02/17 职场文书
CSS的calc函数用法小结
2022/06/25 HTML / CSS