你的位置:首页 > 软件开发 > Java > 使用iscroll插件实现下拉刷新功能

使用iscroll插件实现下拉刷新功能

发布时间:2015-10-26 19:00:16
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 (#换成@)。

可能感兴趣文章

我的浏览记录