声明：虽然本文章为原创，但是很大部分参考了博客园博主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%;
}

@H_502_10@

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

502_10@

502_10@@H_502_10@

502_10@

Pretty row 2
Pretty row 3
Pretty row 4
Pretty row 5
Pretty row 6
Pretty row 7
Pretty row 8
Pretty row 9
Pretty row 10
Pretty row 11
Pretty row 12
Pretty row 13
Pretty row 14
Pretty row 15
Pretty row 16
Pretty row 17
Pretty row 18
Pretty row 19
Pretty row 20

502_10@ @H_502_10@ @H_502_10@ @H_502_10@

<div id="footer">@H_502_10@

@H_502_10@

js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmove事件，scrollEnd事件也类似touchend事件，在滚动结束后执行

function load () {
var myScroll,pullDown = $("#pullDown"),pullUp = $("#pullUp"),pullDownLabel = $(".pullDownLabel"),pullUpLabel = $(".pullUpLabel"),container = $('#list'),loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新

  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); 
}

@H_502_10@

如有出错，欢迎指正 PS：测试环境在firefox的响应式开发环境下运行

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/37238.html

IScroll5 上拉加载下拉刷新