程序博客网 > 刘嘉玲网络云盘

基于iscroll.js实现下拉刷新和上拉加载效果

来源：互联网 发布：刘嘉玲网络云盘 编辑：程序博客网 时间：2024/06/06 00:57

现在已经不是纯Android独霸天下的时代了，H5嵌入Android的Hybrid混合开发是大势所趋。今天给大家带来的就是移动端中常见的“上拉刷新，下拉加载”特效，这个特效将会基于H5来实现。 借助iScroll插件 兼容性也能很好的实现(包括安卓跟IOS)


在看文章之前请先阅读iScroll那篇文章方便更好的理解实现的过程 用的是4.2.5版本


<!DOCTYPE html>
<html>
<head>
 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
 <metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 <metaname="apple-mobile-web-app-capable"content="yes">
 <metaname="apple-mobile-web-app-status-bar-style"content="black">
 <title>iScroll 实例：下拉刷新，滚动翻页</title>
 <styletype="text/css"media="all">
  body,ul,li {
   padding:0;
   margin:0;
   border:0;
  }
 
  body {
   font-size:12px;
   -webkit-user-select:none;
   -webkit-text-size-adjust:none;
   font-family:helvetica;
  }
 
  #header {
   position:absolute;
   top:0; left:0;
   width:100%;
   height:45px;
   line-height:45px;
   background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
   background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
   background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
   padding:0;
   color:#eee;
   font-size:20px;
   text-align:center;
  }
 
  #header a {
   color:#f3f3f3;
   text-decoration:none;
   font-weight:bold;
   text-shadow:0 -1px 0 rgba(0,0,0,0.5);
  }
 
  #footer {
   position:absolute;
   bottom:0; left:0;
   width:100%;
   height:48px;
   background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
   background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
   background-image:-o-linear-gradient(top, #999, #666 2%, #222);
   padding:0;
   border-top:1px solid #444;
  }
 
  #wrapper {
   position:absolute; z-index:1;
   top:45px; bottom:48px; left:0;
   width:100%;
   background:#555;
   overflow:auto;
  }
 
  #scroller {
   position:relative;
  /* -webkit-touch-callout:none;*/
   -webkit-tap-highlight-color:rgba(0,0,0,0);
 
   float:left;
   width:100%;
   padding:0;
  }
 
  #scroller ul {
   position:relative;
   list-style:none;
   padding:0;
   margin:0;
   width:100%;
   text-align:left;
  }
 
  #scroller li {
   padding:0 10px;
   height:40px;
   line-height:40px;
   border-bottom:1px solid #ccc;
   border-top:1px solid #fff;
   background-color:#fafafa;
   font-size:14px;
  }
 
  #scroller li > a {
   display:block;
  }
 
  /**
   *
   * 下拉样式 Pull down styles
   *
   */
  #pullDown, #pullUp {
   background:#fff;
   height:40px;
   line-height:40px;
   padding:5px 10px;
   border-bottom:1px solid #ccc;
   font-weight:bold;
   font-size:14px;
   color:#888;
  }
  #pullDown .pullDownIcon, #pullUp .pullUpIcon {
   display:block; float:left;
   width:40px; height:40px;
   background:url(pull-icon@2x.png) 0 0 no-repeat;
   -webkit-background-size:40px 80px; background-size:40px 80px;
   -webkit-transition-property:-webkit-transform;
   -webkit-transition-duration:250ms;
  }
  #pullDown .pullDownIcon {
   -webkit-transform:rotate(0deg) translateZ(0);
  }
  #pullUp .pullUpIcon {
   -webkit-transform:rotate(-180deg) translateZ(0);
  }
 
 
  /**
   * 动画效果css3代码
   */
  #pullDown.flip .pullDownIcon {
   -webkit-transform:rotate(-180deg) translateZ(0);
  }
 
  #pullUp.flip .pullUpIcon {
   -webkit-transform:rotate(0deg) translateZ(0);
  }
 
  #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
   background-position:0 100%;
   -webkit-transform:rotate(0deg) translateZ(0);
   -webkit-transition-duration:0ms;
 
   -webkit-animation-name:loading;
   -webkit-animation-duration:2s;
   -webkit-animation-iteration-count:infinite;
   -webkit-animation-timing-function:linear;
  }
 
  @-webkit-keyframes loading {
   from { -webkit-transform:rotate(0deg) translateZ(0); }
   to { -webkit-transform:rotate(360deg) translateZ(0); }
  }
 
 </style>
</head>
<body>
 <divid="header">
  <ahref="../db.html#page2">iScroll实例：下拉刷新，滚动翻页</a>
 </div>
 
 <divid="wrapper">
  <divid="scroller">
 
   <divid="pullDown">
    <spanclass="pullDownIcon"></span><spanclass="pullDownLabel">下拉刷新...</span>
   </div>
 
   <ulid="thelist">
    <li>我是三冰 1</li>
    <li>我是三冰 2</li>
    <li>我是三冰 3</li>
    <li>我是三冰 4</li>
    <li>我是三冰 5</li>
    <li>我是三冰 6</li>
    <li>我是三冰 7</li>
    <li>我是三冰 8</li>
    <li>我是三冰 9</li>
    <li>我是三冰 10</li>
    <li>我是三冰 11</li>
    <li>我是三冰 12</li>
    <li>我是三冰 13</li>
   </ul>
 
   <divid="pullUp">
    <spanclass="pullUpIcon"></span><spanclass="pullUpLabel">上拉加载更多...</span>
   </div>
 
  </div>
 </div>
 
 
 <divid="footer"></div>
 
<scripttype="application/javascript"src="iscroll.js"></script>
 
<scripttype="text/javascript">
 
var myScroll,
 pullDownEl, pullDownOffset,
 pullUpEl, pullUpOffset,
 generatedCount = 0;
 
/**
 * 下拉刷新 （自定义实现此方法）
 * myScroll.refresh();  // 数据加载完成后，调用界面更新方法
 */
function pullDownAction () {
 setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
  var el, li, i;
  el = document.getElementById('thelist');
 
  for (i=0; i<3; i++) {
   li= document.createElement('li');
   li.innerText= '添加三冰 ' + (++generatedCount);
   el.insertBefore(li, el.childNodes[0]);
  }
 
  myScroll.refresh();  //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
 }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
 
/**
 * 滚动翻页 （自定义实现此方法）
 * myScroll.refresh();  // 数据加载完成后，调用界面更新方法
 */
function pullUpAction () {
 setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
  var el, li, i;
  el= document.getElementById('thelist');
 
  for (i=0; i<3; i++) {
   li= document.createElement('li');
   li.innerText= '添加三冰 ' + (++generatedCount);
   el.appendChild(li, el.childNodes[0]);
  }
 
  myScroll.refresh();  // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
 }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
 
/**
 * 初始化iScroll控件
 */
function loaded() {
 pullDownEl= document.getElementById('pullDown');
 pullDownOffset= pullDownEl.offsetHeight;
 pullUpEl= document.getElementById('pullUp');
 pullUpOffset= pullUpEl.offsetHeight;
 
 myScroll= newiScroll('wrapper', {
  scrollbarClass: 'myScrollbar', /* 重要样式 */
  useTransition: false, /* 此属性不知用意，本人从true改为false */
  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= '下拉刷新...';
    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 = '上拉加载更多...';
    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?)
   }
  }
 });
 
 setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
 
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
 
</script>
</body>
</html>

0 0
刘嘉玲网络云盘 刘嘉玲网络云盘
原创粉丝点击
热门IT博客
淘宝服装拍摄灯光布置淘宝服装拍摄灯光布置
js排序方法js排序方法
1-100的素数c语言
乐百视网络机顶盒
warframe离线数据模块
js获取div的内容
spring 源码阅读建议
网络黑侠的小说
js e.target
淘宝怎么买燕隼红隼
linux查看svn版本命令
基于php的前后端分离
apache mac
太子妃升职记网络剧
c语言怎么做界面
excel2007去重复数据
二分查找算法java
java ringbuffer
淘宝刀具店
美敦力公司待遇 知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 精轧螺纹钢厂家 精轧精密管 薄壁精轧管 不锈钢精轧管 精轧退火钢管 精轧 精辟 精辟是什么意思 七个字内涵精辟一句话 2018下雨天精辟短句 6个字内涵精辟一句话 幸福是什么精辟回答 加薪理由简单精辟 夸领导的话经典精辟 精达股份 精达股份股吧 精达股份股票 宁波精达 精达股份股票股吧 爱仕达精铁锅 宁波精达股票行情 精达 精达电子 精达科技 精达股票 600577 戏精穿进苦情戏 六项精进 戏精穿进苦情剧txt 精进 戏精穿进苦情剧格格党 戏精穿进苦情剧晋江 当戏精穿进苦情剧 精进什么意思 戏精穿进苦情戏txt 精进电动 戏精穿进苦情剧txt下载 六项精进简短心得 工作日精进正能量800句 精进不休 精进电动科技有限公司

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里