编程 Javascript

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>

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

iscroll实现下拉刷新功能

- Author -

小小——开心

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

May 10 Javascript

js 表单提交后按钮变灰的实例代码

Aug 16 Javascript

基于jquery异步传输json数据格式实例代码

Nov 23 Javascript

Javascript实现单张图片浏览

Dec 18 Javascript

jQuery插件Tmpl的简单使用方法

Apr 27 Javascript

jquery 实现输入邮箱时自动补全下拉提示功能

Oct 04 Javascript

AngularJS使用ngOption实现下拉列表的实例代码

Jan 23 Javascript

BootStrap 可编辑表Table格

Nov 24 Javascript

基于vue.js实现图片轮播效果

Dec 01 Javascript

Bootstrap面板使用方法

Jan 16 Javascript

jQuery实现的背景颜色渐变动画效果示例

Mar 24 jQuery

JS数组方法join()用法实例分析

Jan 18 Javascript

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