富贵资源网

IScroll5实现下拉刷新上拉加载的功能实例
站长资源 2024/11/13 佚名
7 1538
富贵资源网 Design By www.hznty.com

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

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

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

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

<style type="text/css"> 
* { 
  -webkit-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,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%; 
  } 
 
</style>

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

<body onload="load()"> 
<div id="header">iScroll</div> 
<div id="wrapper"> 
  <div id="scroller"> 
  <div id="pullDown" class=""><div class="pullDownLabel"></div></div> 
    <div class="pulldown-tips">下拉刷新</div> 
    <ul id="list"> 
      <li>Pretty row 1</li> 
      <li>Pretty row 2</li> 
      <li>Pretty row 3</li> 
      <li>Pretty row 4</li> 
      <li>Pretty row 5</li> 
      <li>Pretty row 6</li> 
      <li>Pretty row 7</li> 
      <li>Pretty row 8</li> 
      <li>Pretty row 9</li> 
      <li>Pretty row 10</li> 
      <li>Pretty row 11</li> 
      <li>Pretty row 12</li> 
      <li>Pretty row 13</li> 
      <li>Pretty row 14</li> 
      <li>Pretty row 15</li> 
      <li>Pretty row 16</li> 
      <li>Pretty row 17</li> 
      <li>Pretty row 18</li> 
      <li>Pretty row 19</li> 
      <li>Pretty row 20</li> 
    </ul> 
    <div id="pullUp" class=""> 
    <div class="pullUpLabel">加载更多</div> 
    </div> 
  </div> 
</div> 
 
<div id="footer"></div> 
 
</body>

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

<script type="text/javascript"> 
 
  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, i; 
        for (i = 0,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); 
    } 
 
 
</script>

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

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

富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com