iscroll实现下拉刷新功能


Posted in Javascript onJuly 18, 2017

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

版本号:iscroll4.2.5.js

iscroll 版本很有关系  在线: demo链接   有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了

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, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>

<script type="text/javascript" src="../../src/iscroll.js"></script>

<script type="text/javascript">

var myScroll,
  pullDownEl, pullDownOffset,
  pullUpEl, pullUpOffset,
  generatedCount = 0;

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 = 'Generated row ' + (++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!
}

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 = 'Generated row ' + (++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!
}

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 = 'Pull down to refresh...';
      } else if (pullUpEl.className.match('loading')) {
        pullUpEl.className = '';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
      }
    },
    onScrollMove: function () {
      if (this.y > 5 && !pullDownEl.className.match('flip')) {
        pullDownEl.className = 'flip';
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
        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 = 'Release to refresh...';
        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 = 'Loading...';        
        pullDownAction();  // Execute custom function (ajax call?)
      } else if (pullUpEl.className.match('flip')) {
        pullUpEl.className = 'loading';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';        
        pullUpAction();  // Execute custom function (ajax call?)
      }
    }
  });
  
  setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

<style type="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; z-index:2;
  top:0; left:0;
  width:100%;
  height:45px;
  line-height:45px;
  background-color:#d51875;
  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; z-index:2;
  bottom:0; left:0;
  width:100%;
  height:48px;
  background-color:#222;
  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:-9999px;
  width:100%;
  background:#aaa;
  overflow:auto;
}

#scroller {
  position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  width:100%;
  padding:0;
}

#scroller ul {
  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;
}

#myFrame {
  position:absolute;
  top:0; left:0;
}



/**
 *
 * 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);
}

#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>

<div id="header"><a href="http://cubiq.org/iscroll" rel="external nofollow" >iScroll</a></div>
<div id="wrapper">
  <div id="scroller">
    <div id="pullDown">
      <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
    </div>

    <ul id="thelist">
      <li>Pretty row 1</li>
      <li>Pretty row 2</li>
      <li>Pretty row 3</li>
      <li>Pretty row 4</li>
      <li>Pretty row 5</li>
      <li>Pretty row 6</li>
      <li>Pretty row 7</li>
      <li>Pretty row 8</li>
      <li>Pretty row 9</li>
      <li>Pretty row 10</li>
      <li>Pretty row 11</li>
      <li>Pretty row 12</li>
      <li>Pretty row 13</li>
      <li>Pretty row 14</li>
      <li>Pretty row 15</li>
      <li>Pretty row 16</li>
      <li>Pretty row 17</li>
      <li>Pretty row 18</li>
      <li>Pretty row 19</li>
      <li>Pretty row 20</li>
      <li>Pretty row 21</li>
      <li>Pretty row 22</li>
      <li>Pretty row 23</li>
      <li>Pretty row 24</li>
      <li>Pretty row 25</li>
      <li>Pretty row 26</li>
      <li>Pretty row 27</li>
      <li>Pretty row 28</li>
      <li>Pretty row 29</li>
      <li>Pretty row 30</li>
      <li>Pretty row 31</li>
      <li>Pretty row 32</li>
      <li>Pretty row 33</li>
      <li>Pretty row 34</li>
      <li>Pretty row 35</li>
      <li>Pretty row 36</li>
      <li>Pretty row 37</li>
      <li>Pretty row 38</li>
      <li>Pretty row 39</li>
      <li>Pretty row 40</li>
    </ul>
    <div id="pullUp">
      <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
    </div>
  </div>
</div>
<div id="footer"></div>

</body>
</html>

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

Javascript 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue.js实现单选框、复选框和下拉框示例
Jul 18 #Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 #Javascript
iscroll.js滚动加载实例详解
Jul 18 #Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 #Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 #Javascript
iscroll动态加载数据完美解决方法
Jul 18 #Javascript
You might like
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
laravel5.6实现数值转换
2019/10/23 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
Prototype框架详解
2015/11/25 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue中props的详解
2019/05/16 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
表演方阵解说词
2014/02/08 职场文书
文明寝室标语
2014/06/13 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript