iscroll实现下拉刷新功能     ——开心   这篇文章主要介绍了iscroll实现下拉刷新功能的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 () { // -- work congestion, remove setTimeout from production!
 var el, li, i;
 el = document.getElementById('thelist');
 for (i=0; i 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: pletion)
 }, 1000); // -- work congestion, remove setTimeout from production!
function pullUpAction () {
 setTimeout(function () { // -- work congestion, remove setTimeout from production!
 var el, li, i;
 el = document.getElementById('thelist');
 for (i=0; i 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: pletion)
 }, 1000); // -- work 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;

 background:url(pull-) 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="iscroll" rel="external nofollow" iScroll /a /div 
 div id="wrapper" 
 div id="scroller" 
 div id="pullDown" 
 span /span span 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 /span span Pull up to refresh... /span 
 /div 
 /div 
 /div 
 div id="footer" /div 
 /body 
 /html 

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