最近装了个discuz论坛, 趣股VIP吧，发现里面内置的jQuery上拉刷新组件写得还行，STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/img/',不多说直接上代码
var pullrefresh = {
init : function() {
var pos = {};
var status = false;
var divobj = null;
var contentobj = null;
var reloadflag = false;
$('body').on('touchstart', function(e) {
e = mygetnativeevent(e);
pos.startx = e.touches[0].pageX;
pos.starty = e.touches[0].pageY;
})
.on('touchmove', function(e) {
e = mygetnativeevent(e);
pos.curposx = e.touches[0].pageX;
pos.curposy = e.touches[0].pageY;
if(pos.curposy - pos.starty < 0 && !status) {
return;
}
if(!status && $(window).scrollTop() <= 0) {
status = true;
divobj = document.createElement('div');
divobj = $(divobj);
divobj.css({'position':'relative', 'margin-left':'-85px'});
$('body').prepend(divobj);
contentobj = document.createElement('div');
contentobj = $(contentobj);
contentobj.css({'position':'absolute', 'height':'30px', 'top': '-30px', 'left':'50%'});
contentobj.html('<img src="'+ STATICURL + 'icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>');
contentobj.find('img').css({'-webkit-transition':'all 0.5s ease-in-out'});
divobj.prepend(contentobj);
pos.topx = pos.curposx;
pos.topy = pos.curposy;
}
if(!status) {
return;
}
if(status == true) {
var pullheight = pos.curposy - pos.topy;
if(pullheight >= 0 && pullheight < 150) {
divobj.css({'height': pullheight/2 + 'px'});
contentobj.css({'top': (-30 + pullheight/2) + 'px'});
if(reloadflag) {
contentobj.find('img').css({'-webkit-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)', 'transform':'rotate(180deg)'});
contentobj.find('#refreshtxt').html('下拉可以刷新');
}
reloadflag = false;
} else if(pullheight >= 150) {
divobj.css({'height':pullheight/2 + 'px'});
contentobj.css({'top': (-30 + pullheight/2) + 'px'});
if(!reloadflag) {
contentobj.find('img').css({'-webkit-transform':'rotate(360deg)', '-moz-transform':'rotate(360deg)', '-o-transform':'rotate(360deg)', 'transform':'rotate(360deg)'});
contentobj.find('#refreshtxt').html('松开可以刷新');
}
reloadflag = true;
}
}
e.preventDefault();
})
.on('touchend', function(e) {
if(status == true) {
if(reloadflag) {
contentobj.html('<img src="'+ STATICURL + 'icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...');
contentobj.animate({'top': (-30 + 75) + 'px'}, 618, 'linear');
divobj.animate({'height': '75px'}, 618, 'linear', function() {
window.location.reload();
});
return;
}
}
if(divobj != null)// fixed bugs by Nelson 20160818
{
divobj.remove();
}
divobj = null;
status = false;
pos = {};
});
}
};
function mygetnativeevent(event) {
while(event && typeof event.originalEvent !== "undefined") {
event = event.originalEvent;
}
return event;
}