编程 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 相关文章推荐

从jQuery.camelCase()学习string.replace() 函数学习

Sep 13 Javascript

JS获取iframe中marginHeight和marginWidth属性的方法

Apr 01 Javascript

设置jQueryUI DatePicker默认语言为中文

Jun 04 Javascript

简单模拟node.js中require的加载机制

Oct 27 Javascript

清除输入框内的空格

Dec 21 Javascript

bootstrapValidator表单验证插件学习

Dec 30 Javascript

RequireJs的使用详解

Feb 19 Javascript

jQuery实现简单日期格式化功能示例

Sep 19 jQuery

javascript实现计算指定范围内的质数示例

Dec 29 Javascript

vue中$nextTick的用法讲解

Jan 17 Javascript

Node.js API详解之 string_decoder用法实例分析

Apr 29 Javascript

JS实现联想、自动补齐国家或地区名称的功能

Jul 07 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