一個簡單的JavaScript實現的頁面下拉刷新插件如下：
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>