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