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


Posted in Javascript onAugust 11, 2017

声明:虽然本文章为原创,但是很大部分参考了博客园博主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的响应式开发环境下运行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
简单的vuex 的使用案例笔记
Apr 13 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JS+DIV实现拖动效果
Feb 11 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 #Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 #Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 #Javascript
JS非空验证及邮箱验证的实例
Aug 11 #Javascript
vue如何获取点击事件源的方法
Aug 10 #Javascript
Vue单文件组件基础模板小结
Aug 10 #Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 #Javascript
You might like
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
php写app用的框架整理
2019/09/29 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
Js callBack 返回前一页的js方法
2008/11/30 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
模拟select的代码
2011/10/19 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python struct.unpack
2008/09/06 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
python温度转换华氏温度实现代码
2020/12/06 Python
浅析python实现动态规划背包问题
2020/12/31 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
甜品店的创业计划书范文
2014/01/02 职场文书
新文化运动的基本口号
2014/06/21 职场文书
建党伟业的观后感
2015/06/01 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫