1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf- ...
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='/images/loading.gif' data-original="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 styles203 *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 ></span><span >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 ></span><span >Pull up to refresh...</span>309 </div>310 </div>311 </div>312 <div id="footer"></div>313 314 </body>315 </html>
原标题:使用iscroll插件实现下拉刷新功能
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。