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

前端之家收集整理的这篇文章主要介绍了IScroll5实现下拉刷新上拉加载的功能实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

声明:虽然本文章为原创,但是很大部分参考了博客园博主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里面添加刷新/加载数据提示

<div id="footer">

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

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

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

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

猜你在找的JavaScript相关文章