声明：虽然本文章为原创，但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下。

实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）

外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jQuery简化一下开发

以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来

Box-sizing: border-Box; -moz-Box-sizing: border-Box; Box-sizing: border-Box; }

html {
-ms-touch-action: none;
}

body,ul,li {
padding: 0;
margin: 0;
border: 0;
}

body {
font-size: 12px;
font-family: ubuntu,helvetica,arial;
overflow: hidden; / this is important to prevent the whole page to bounce /
}

header {

position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}

footer {

position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}

wrapper {

position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}

scroller {

position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}

scroller ul {

list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}

scroller li {

padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}

pullDown,#pullUp,.pulldown-tips{

height:40px;
line-height:40px;
text-align:center;
}
.pulldown-tips{
position:absolute;
top:-40px;
left:0;
width:100%;
}

html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示

pullDown.hide(); pullUp.hide(); myScroll = new IScroll("#wrapper",{ scrollbars: true,mouseWheel: false,interactiveScrollbars: true,shrinkScrollbars: 'scale',fadeScrollbars: true,scrollY:true,probeType: 2,bindToWrapper:true }); myScroll.on("scroll",function(){ if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){ if(this.y > 40){//下拉刷新操作 $(".pulldown-tips").hide(); pullDown.addClass("refresh").show(); pullDownLabel.text("松手刷新数据"); loadingStep = 1; myScroll.refresh(); }else if(this.y < (this.maxScrollY - 14)){//上拉加载更多 pullUp.addClass("refresh").show(); pullUpLabel.text("正在载入"); loadingStep = 1; pullUpAction(); } } }); myScroll.on("scrollEnd",function(){ if(loadingStep == 1){ if( pullDown.attr("class").match("refresh") ){//下拉刷新操作 pullDown.removeClass("refresh").addClass("loading"); pullDownLabel.text("正在刷新"); loadingStep = 2; pullDownAction(); } } }); function pullDownAction(){ setTimeout(function(){ var li,i; for (i = 0,li = ""; i < 3; i++) { li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>"; } container.prepend(li); pullDown.attr('class','').hide(); myScroll.refresh(); loadingStep = 0; $(".pulldown-tips").show(); },1000); } function pullUpAction(){ setTimeout(function(){ var li,li = ""; i < 3; i++) { li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>"; } container.append(li); pullUp.attr('class','').hide(); myScroll.refresh(); loadingStep = 0; },1000); } document.addEventListener('touchmove',function (e) { e.preventDefault(); },false); }

IScroll5实现下拉刷新上拉加载的功能实例