JavaScript实现页面下拉刷新
2015-09-16 10:07
721 查看
一个简单的JavaScript实现的页面下拉刷新插件如下:
pullToRefresh.js
main.css
index.html
pullToRefresh.js
(function(exports){ var document = exports.document; function PullToRefresh(opts){ if(!(this instanceof PullToRefresh)){ return; } this.onRefresh = null; this.initialized = false; return this; } exports.PullToRefresh = PullToRefresh; PullToRefresh.prototype = { init: function(opts){ this.locked = false; this.paused = false; this.page = 1; this.max_page = 0; this.configure(opts); this.initialized || (this.initialized = true, this.initEvent()); return this; }, initEvent: function(){ var _this = this; exports.addEventListener('scroll', function(){ if(_this.paused || _this.locked){ return; } if(document.body.scrollHeight - exports.innerHeight - document.body.scrollTop < 50){ _this.refresh(); } }, false); }, configure: function(opts){ if(opts && typeof opts === 'object'){ if(opts instanceof Object){ for(var pro in opts){ this[pro] = opts[pro]; } } } }, refresh: function(){ if(this.page >= this.max_page){ return; } if(this.onRefresh && typeof this.onRefresh === 'function'){ this.locked = true; if(this.onRefresh() === true){ this.page++; } this.locked = false; } }, pause: function(){ this.paused = true; }, resume: function(){ this.paused = false; } }; })(window);
main.css
html, body{ width: 100%; margin: 0; padding: 0; } html{ overflow-x: hidden; overflow-y: auto; } ul{ list-style: none; margin: 0; padding: 0; } p{ padding: 0; margin: 0; } a{ text-decoration: none; }
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>pullToRefresh</title> <link rel="stylesheet" href="./css/main.css"> <style> .list{ box-sizing: border-box; position: relative; background-color: #ccc; color: #fff; font-weight: bold; text-align: center; padding-bottom: 10px; } .list>li{ width: 80%; height: 30px; line-height: 30px; margin: 10px auto 0; border-radius: 4px; background-color: #428bca; display: inline-block; } </style> </head> <body> <ul class="list" id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> </ul> <!-- javascript --> <script src="./js/pullToRefresh.min.js"></script> <script> var current_page = 1, max_page = 5; // refresh var refresh = new PullToRefresh().init({ onRefresh: onRefresh, max_page: max_page }); function onRefresh(){ var i, html = []; current_page++; for(i = 1; i <= 20; i++){ html.push('<li>' + ((current_page - 1) * 20 + i) + '</li>'); } document.querySelector('#list').innerHTML += html.join(''); return true; } </script> </body> </html>