使用前必须导入scroller.css、iscroll.js这两个文件
<link rel=”stylesheet” href=”css/scroller.css”>
<script type=”text/javascript” src=”js/iscroll.js”></script>
部分代码：
<script>
var listdata=””; var num=1;/*测试代码*/
var myScroll,
pullDownEl, pullDownOffset,
generatedCount = 0;
function pullDownAction () {
setTimeout(function () {
/**
* 这个地方就是下拉刷新时操作，比如重新加载数据
* 外部的setTimeout 在正式环境可以去除，此处只是为了显示一个延迟的效果
*/
/*测试代码 start*/
listds = $(“#newsList”).html();
listdata = “<p>列表测试数据”+num+”</p>” + listds;
$(“#newsList”).html(listdata);
num++;
/*测试代码 end*/
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
}, 2000);
uexWindow.toast(‘0′,’5′,’刷新成功’,’2000′);
}
function pullUpAction () {
setTimeout(function () { // <– Simulate network congestion, remove setTimeout from production!
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <– Simulate network congestion, remove setTimeout from production!
}
function loaded() {
pullDownEl = document.getElementById(‘pullDown’);
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll(‘wrapper’, {
fixedScrollbar:false,
vScrollbar:false,
checkDOMChanges:true,
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match(‘loading’)) {
pullDownEl.className = ”;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘下拉刷新…’;
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match(‘flip’)) {
pullDownEl.className = ‘flip’;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘松开刷新…’;
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match(‘flip’)) {
pullDownEl.className = ”;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘下拉刷新…’;
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match(‘flip’)) {
pullDownEl.className = ‘loading’;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘正在刷新…’;
pullDownAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById(‘wrapper’).style.left = ‘0’; }, 800);
}
document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
document.addEventListener(‘DOMContentLoaded’, function () { setTimeout(loaded, 200); }, false);
</script>
html5+js下拉刷新demo下载地址：http://pan.baidu.com/s/124x4w