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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php学习笔记之 函数声明
2011/06/09 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP闭包函数详解
2016/02/13 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python计算文本文件行数的方法
2015/07/06 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python实现剪切功能
2019/01/23 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
聊聊python中的异常嵌套
2020/09/01 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
婚前协议书范本
2014/10/27 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
安全保证书格式
2015/02/28 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python绘制分类图的方法
2021/04/20 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android