标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title>html5+css3实现上拉和下拉刷新</title> 9 10 <script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script> 11 12 <script type="text/javascript"> 13 14 var myScroll, 15 pullDownEl, 16 pullDownOffset, 17 pullUpEl, 18 pullUpOffset, 19 generatedCount = 0; 20 21 function pullDownAction () { 22 setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! 23 var el, li, i; 24 el = document.getElementById(‘thelist‘); 25 26 for (i=0; i<3; i++) { 27 li = document.createElement(‘li‘); 28 li.innerText = ‘Generated row ‘ + (++generatedCount); 29 el.insertBefore(li, el.childNodes[0]); 30 } 31 32 myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion) 33 }, 1000); // <-- Simulate network congestion, remove setTimeout from production! 34 } 35 36 function pullUpAction () { 37 setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! 38 var el, li, i; 39 el = document.getElementById(‘thelist‘); 40 41 for (i=0; i<3; i++) { 42 li = document.createElement(‘li‘); 43 li.innerText = ‘Generated row ‘ + (++generatedCount); 44 el.appendChild(li, el.childNodes[0]); 45 } 46 47 myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion) 48 }, 1000); // <-- Simulate network congestion, remove setTimeout from production! 49 } 50 51 function loaded() { 52 pullDownEl = document.getElementById(‘pullDown‘); 53 pullDownOffset = pullDownEl.offsetHeight; 54 pullUpEl = document.getElementById(‘pullUp‘); 55 pullUpOffset = pullUpEl.offsetHeight; 56 57 myScroll = new iScroll(‘wrapper‘, { 58 useTransition: true, 59 topOffset: pullDownOffset, 60 onRefresh: function () { 61 if (pullDownEl.className.match(‘loading‘)) { 62 pullDownEl.className = ‘‘; 63 pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Pull down to refresh...‘; 64 } else if (pullUpEl.className.match(‘loading‘)) { 65 pullUpEl.className = ‘‘; 66 pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Pull up to load more...‘; 67 } 68 }, 69 onScrollMove: function () { 70 if (this.y > 5 && !pullDownEl.className.match(‘flip‘)) { 71 pullDownEl.className = ‘flip‘; 72 pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Release to refresh...‘; 73 this.minScrollY = 0; 74 } else if (this.y < 5 && pullDownEl.className.match(‘flip‘)) { 75 pullDownEl.className = ‘‘; 76 pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Pull down to refresh...‘; 77 this.minScrollY = -pullDownOffset; 78 } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(‘flip‘)) { 79 pullUpEl.className = ‘flip‘; 80 pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Release to refresh...‘; 81 this.maxScrollY = this.maxScrollY; 82 } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip‘)) { 83 pullUpEl.className = ‘‘; 84 pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Pull up to load more...‘; 85 this.maxScrollY = pullUpOffset; 86 } 87 }, 88 onScrollEnd: function () { 89 if (pullDownEl.className.match(‘flip‘)) { 90 pullDownEl.className = ‘loading‘; 91 pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Loading...‘; 92 pullDownAction(); // Execute custom function (ajax call?) 93 } else if (pullUpEl.className.match(‘flip‘)) { 94 pullUpEl.className = ‘loading‘; 95 pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Loading...‘; 96 pullUpAction(); // Execute custom function (ajax call?) 97 } 98 } 99 }); 100 101 setTimeout(function () { document.getElementById(‘wrapper‘).style.left = ‘0‘; }, 800); 102 } 103 104 document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false); 105 106 document.addEventListener(‘DOMContentLoaded‘, function () { setTimeout(loaded, 200); }, false); 107 </script> 108 109 <style type="text/css" media="all"> 110 body,ul,li { 111 padding:0; 112 margin:0; 113 border:0; 114 } 115 116 body { 117 font-size:12px; 118 -webkit-user-select:none; 119 -webkit-text-size-adjust:none; 120 font-family:helvetica; 121 } 122 123 #header { 124 position:absolute; z-index:2; 125 top:0; left:0; 126 width:100%; 127 height:45px; 128 line-height:45px; 129 background-color:#d51875; 130 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); 131 background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); 132 background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); 133 padding:0; 134 color:#eee; 135 font-size:20px; 136 text-align:center; 137 } 138 139 #header a { 140 color:#f3f3f3; 141 text-decoration:none; 142 font-weight:bold; 143 text-shadow:0 -1px 0 rgba(0,0,0,0.5); 144 } 145 146 #footer { 147 position:absolute; z-index:2; 148 bottom:0; left:0; 149 width:100%; 150 height:48px; 151 background-color:#222; 152 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); 153 background-image:-moz-linear-gradient(top, #999, #666 2%, #222); 154 background-image:-o-linear-gradient(top, #999, #666 2%, #222); 155 padding:0; 156 border-top:1px solid #444; 157 } 158 159 #wrapper { 160 position:absolute; z-index:1; 161 top:45px; bottom:48px; left:-9999px; 162 width:100%; 163 background:#aaa; 164 overflow:auto; 165 } 166 167 #scroller { 168 position:absolute; z-index:1; 169 /* -webkit-touch-callout:none;*/ 170 -webkit-tap-highlight-color:rgba(0,0,0,0); 171 width:100%; 172 padding:0; 173 } 174 175 #scroller ul { 176 list-style:none; 177 padding:0; 178 margin:0; 179 width:100%; 180 text-align:left; 181 } 182 183 #scroller li { 184 padding:0 10px; 185 height:40px; 186 line-height:40px; 187 border-bottom:1px solid #ccc; 188 border-top:1px solid #fff; 189 background-color:#fafafa; 190 font-size:14px; 191 } 192 193 #myFrame { 194 position:absolute; 195 top:0; left:0; 196 } 197 198 199 200 /** 201 * 202 * Pull down styles 203 * 204 */ 205 #pullDown, #pullUp { 206 background:#fff; 207 height:40px; 208 line-height:40px; 209 padding:5px 10px; 210 border-bottom:1px solid #ccc; 211 font-weight:bold; 212 font-size:14px; 213 color:#888; 214 } 215 #pullDown .pullDownIcon, #pullUp .pullUpIcon { 216 display:block; float:left; 217 width:40px; height:40px; 218 background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat; 219 -webkit-background-size:40px 80px; background-size:40px 80px; 220 -webkit-transition-property:-webkit-transform; 221 -webkit-transition-duration:250ms; 222 } 223 #pullDown .pullDownIcon { 224 -webkit-transform:rotate(0deg) translateZ(0); 225 } 226 #pullUp .pullUpIcon { 227 -webkit-transform:rotate(-180deg) translateZ(0); 228 } 229 230 #pullDown.flip .pullDownIcon { 231 -webkit-transform:rotate(-180deg) translateZ(0); 232 } 233 234 #pullUp.flip .pullUpIcon { 235 -webkit-transform:rotate(0deg) translateZ(0); 236 } 237 238 #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { 239 background-position:0 100%; 240 -webkit-transform:rotate(0deg) translateZ(0); 241 -webkit-transition-duration:0ms; 242 243 -webkit-animation-name:loading; 244 -webkit-animation-duration:2s; 245 -webkit-animation-iteration-count:infinite; 246 -webkit-animation-timing-function:linear; 247 } 248 249 @-webkit-keyframes loading { 250 from { -webkit-transform:rotate(0deg) translateZ(0); } 251 to { -webkit-transform:rotate(360deg) translateZ(0); } 252 } 253 254 </style> 255 </head> 256 <body> 257 258 <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> 259 <div id="wrapper"> 260 <div id="scroller"> 261 <div id="pullDown"> 262 <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span> 263 </div> 264 265 <ul id="thelist"> 266 <li>Pretty row 1</li> 267 <li>Pretty row 2</li> 268 <li>Pretty row 3</li> 269 <li>Pretty row 4</li> 270 <li>Pretty row 5</li> 271 <li>Pretty row 6</li> 272 <li>Pretty row 7</li> 273 <li>Pretty row 8</li> 274 <li>Pretty row 9</li> 275 <li>Pretty row 10</li> 276 <li>Pretty row 11</li> 277 <li>Pretty row 12</li> 278 <li>Pretty row 13</li> 279 <li>Pretty row 14</li> 280 <li>Pretty row 15</li> 281 <li>Pretty row 16</li> 282 <li>Pretty row 17</li> 283 <li>Pretty row 18</li> 284 <li>Pretty row 19</li> 285 <li>Pretty row 20</li> 286 <li>Pretty row 21</li> 287 <li>Pretty row 22</li> 288 <li>Pretty row 23</li> 289 <li>Pretty row 24</li> 290 <li>Pretty row 25</li> 291 <li>Pretty row 26</li> 292 <li>Pretty row 27</li> 293 <li>Pretty row 28</li> 294 <li>Pretty row 29</li> 295 <li>Pretty row 30</li> 296 <li>Pretty row 31</li> 297 <li>Pretty row 32</li> 298 <li>Pretty row 33</li> 299 <li>Pretty row 34</li> 300 <li>Pretty row 35</li> 301 <li>Pretty row 36</li> 302 <li>Pretty row 37</li> 303 <li>Pretty row 38</li> 304 <li>Pretty row 39</li> 305 <li>Pretty row 40</li> 306 </ul> 307 <div id="pullUp"> 308 <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span> 309 </div> 310 </div> 311 </div> 312 <div id="footer"></div> 313 314 </body> 315 </html>
将定时函数换成ajax回调，具体怎么换，到项目需求时在测试吧
标签：
原文地址：http://www.cnblogs.com/suoking/p/4911995.html
