JS三教九流系列-iscroll.js-页面下拉刷新上拉加载等效果实现

一.准备环节

iscroll.js 5.x版本项目地址 https://github.com/cubiq/iscroll

演示地址：http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html

下载解压，我们打开demos目录，把click复制，改名字为app，也就是我们处理的基础，app文件目录下的index.html改为app.html，都是为了更好理解为自己创建的应用

我们打开app.html，先预览一下js文件，就是iscroll.js，看看就好，我们没必要去改，我们返回html页面，

js部分做出修改如下：

<script type="text/javascript">
window.onload=function(){
 var myScroll;
 myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
};
</script>

html的body标签调用的载入去掉，这样看着才舒心：

<body>

：：：：：最重要的一点，在引入类库的目录下我们可以看到很多iscroll.js的类库文件，我们选择下面的，这是事最全的，可以保证所有api被支持：

我们引入js部分代码改成如下：

<script type="text/javascript" src="../../build/iscroll-probe.js"></script>

我们需要找到针对iscroll的api，根据api提供的属性和方法等去修改目标效果。

二.接口使用和基本封装

----1.思考

我们要找到的是事件：

1.下拉事件接口

2.上拉事假接口

我们找到后，

针对下拉做提示刷新图标显示

针对上拉，就去ajax请求调用，当然我们只要模拟插入数据就好了。

针对5.x版本，我们一定要找到对应的api，不同版本的api是不同的，我们大致罗列iscroll5.x的所有api：

网上的一套总结：http://www.cnblogs.com/leolai/articles/4204345.html

官网虽好，英文水平不行：http://iscrolljs.com/

----2.事件：

myScroll.on('scrollStart', function(){console.log("拖拽开始")});
myScroll.on('scroll', function(){console.log("拖拽中")});
myScroll.on('scrollEnd', function(){console.log("拖拽结束")});

我们修改代码，加入事件测试：

<script type="text/javascript">
window.onload=function(){
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 myScroll.on('scrollStart', function(){console.log("开始")}); 
 myScroll.on('scroll', function(){console.log("拖拽中")}); 
 myScroll.on('scrollEnd', function(){console.log("结束")}); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 //alert(myScroll.y)
 
};
</script>

测试的日志显示，表示我们需要的事件被支持：

----3.属性

myScroll.x //当前位置
myScroll.y

myScroll.maxScrollX //当滚动到底部时的 myScroll.x/y
myScroll.maxScrollY

myScroll.directionX //上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左)
myScroll.directionY

myScroll.currentPage //当前Snap信息

我们的处理都是下拉和上拉处理，毫无疑问在y轴的处理才是我们需要的，我们需要的api属性大概应该如下：

myScroll.y //当前位置y
myScroll.maxScrollY //当滚动到底部时的 y

我们在 scroll 事件输出这两个信息测试，js代码修改如下：

<script type="text/javascript">
window.onload=function(){
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 myScroll.on('scrollStart', function(){console.log("开始")}); 
 myScroll.on('scroll', function(){
  console.log("拖拽中y:"+myScroll.y);
  console.log("拖拽底部y:"+myScroll.maxScrollY);
 }); 
 myScroll.on('scrollEnd', function(){console.log("结束")}); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 
 
};
</script>

分析打印日志，我们得出myScroll.maxScrollY 是固定值；

myScroll.y是时时变化值；

我们结合实际：

下拉就是myScroll.y大于0；

下拉就是myScroll.y小于myScroll.maxScrollY ；

----4.根据y值做出最基本封装

根据上面的结果，我们做了下面判断处理，并日志打印，我们写个5的差值，就是为了避免一移动就触发

<script type="text/javascript">
window.onload=function(){
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 myScroll.on('scrollStart', function(){console.log("开始")}); 
 myScroll.on('scroll', function(){
  if (this.y > 5) {
   //下拉刷新效果  
   console.log("下拉");
  } else if (this.y < (this.maxScrollY - 5)) {
   //上拉刷新效果  
   console.log("上拉");
  };  
 }); 
 myScroll.on('scrollEnd', function(){console.log("结束")}); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 
 
};
</script>

----5.二次封装处理

我们问题在哪里？拿下拉举例子，就是只要下拉就打印日志，这是不符合逻辑的，应该是

判断出下拉或者上拉事件
在下拉或者上拉结束打印日志或者处理

我们删除开始事件，这个已经不用，

我们创建表示上拉和下拉的变量，然后在结束时间根据标志去做判断处理，代码修改如下：

<script type="text/javascript">
window.onload=function(){
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 var handle=0;//初始为0，无状态；1表示下拉，2表示上拉
 myScroll.on('scroll', function(){
  if (this.y > 5) {
   //下拉刷新效果 ，标识设置为1 
   handle=1;
  } else if (this.y < (this.maxScrollY - 5)) {
   //上拉刷新效果 ，表示设置为2 
   handle=2;
  };  
 }); 
 myScroll.on('scrollEnd', function(){
  if(handle==1){
   //下拉刷新处理
   console.log("下拉");
   myScroll.refresh();
   handle=0;//重设为0，改为无状态
  }else if(handle==2){
   //上拉刷新处理
   console.log("上拉");
   handle=0;//重设为0，改为无状态
  }else{handle=0;};  
 }); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  
};
</script>

我们谷歌浏览器，去测试，就发现是没什么问题的，下拉/上拉+结束才会处理。

这样会显得结构比较乱，我们会好把处理的程序代码放在外面调用处理，我们进一步修改优化如下：

<script type="text/javascript">
window.onload=function(){
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 var handle=0;//初始为0，无状态；1表示下拉，2表示上拉
 myScroll.on('scroll', function(){
  if (this.y > 5) {//下拉刷新效果 ，标识设置为1 
   handle=1;
  } else if (this.y < (this.maxScrollY - 5)) {//上拉刷新效果 ，表示设置为2 
   handle=2;
  };  
 }); 
 myScroll.on('scrollEnd', function(){
  if(handle==1){//下拉刷新处理
   downrefresh()
   handle=0;//重设为0，改为无状态
  }else if(handle==2){//上拉刷新处理
   upajaxload()   
   handle=0;//重设为0，改为无状态
  }else{handle=0;};  
 }); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 
 
 function downrefresh(){//刷新处理
  console.log("下拉");
  myScroll.refresh();
 };
 function upajaxload(){//加载处理
  console.log("上拉");
 };
  
};
</script>

对于结束时的判断我们只要放在这两个函数里面就好了，下拉刷新和上拉加载的处理代码。

----6.三次封装处理

下拉就不必多说，app里面就是加载下面的数据，但是下拉的时候我们会看到提示内容：

下拉过程中，那个位置要显示些什么（提示啊），我们现在就在这个部分加上处理，其实上拉要是也有的话，原理一样。

我们在页面这个位置定位一个标签，写入要显示的内容，开始透明度为0，我们在下拉时改变透明度去显示

<script type="text/javascript">
window.onload=function(){
 var requestf5=document.getElementById("requestf5");
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 var handle=0;//初始为0，无状态；1表示下拉，2表示上拉
 myScroll.on('scroll', function(){
  if (this.y > 5) {//下拉刷新效果 ，标识设置为1 
   handle=1;
   if(this.y>20){
    requestf5.style.opacity=1;
   }else{
    requestf5.style.opacity=0;
   };
  } else if (this.y < (this.maxScrollY - 5)) {//上拉刷新效果 ，表示设置为2 
   handle=2;
  };  
 }); 
 myScroll.on('scrollEnd', function(){
  if(handle==1){//下拉刷新处理
   downrefresh()
   handle=0;//重设为0，改为无状态
  }else if(handle==2){//上拉刷新处理
   upajaxload()   
   handle=0;//重设为0，改为无状态
  }else{handle=0;};  
 }); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 
 
 function downrefresh(){//刷新处理
  console.log("下拉");
  myScroll.refresh();
 };
 function upajaxload(){//加载处理
  console.log("上拉");
 };
  
};
</script>

当时我的是非常粗糙的处理，这个提示根据你的设计可以丰富起来。

基本的处理和封装以及api的使用就结束了，还有很多参数的设置，可以参考api。

三.非常简单的模拟实例

刷新就这样就可以了，我们给下拉加入请求处理，就是ajax载入数据，我们修改页面结构，第一页内容默认显示，我们引入jq类库，方便我们ajax的模拟处理和节点插入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: click</title>
<script type="text/javascript" src="../../build/iscroll-probe.js"></script>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
 var requestf5=document.getElementById("requestf5");
 var myScroll;
 myScroll = new IScroll('#wrapper', { 
  mouseWheel: true,  //是否监听鼠标滚轮事件
  bounceTime:600,    //弹力动画持续的毫秒数
  probeType: 3
 });
 var handle=0;//初始为0，无状态；1表示下拉，2表示上拉
 myScroll.on('scroll', function(){
  if (this.y > 5) {//下拉刷新效果 ，标识设置为1 
   handle=1;
   if(this.y>20){
    requestf5.style.opacity=1;
   }else{
    requestf5.style.opacity=0;
   };
  } else if (this.y < (this.maxScrollY - 5)) {//上拉刷新效果 ，表示设置为2 
   handle=2;
  };  
 }); 
 myScroll.on('scrollEnd', function(){
  if(handle==1){//下拉刷新处理
   downrefresh()
   handle=0;//重设为0，改为无状态
  }else if(handle==2){//上拉刷新处理
   upajaxload()   
   handle=0;//重设为0，改为无状态
  }else{handle=0;};  
 }); 
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 
 
 function downrefresh(){//刷新处理
  console.log("下拉");
  page=1;
  myScroll.refresh();
 };
 
 
 var page=1;
    var limit=10;
  var jsondata=[
        {'aa':111,'bb':111111},
        {'aa':222,'bb':111111},
        {'aa':333,'bb':111111},
        {'aa':444,'bb':111111},
        {'aa':555,'bb':111111},
        {'aa':666,'bb':111111},
        {'aa':777,'bb':111111},
        {'aa':888,'bb':111111},
        {'aa':999,'bb':111111},
        {'aa':123,'bb':111111},
        {'aa':456,'bb':111111},
        {'aa':789,'bb':111111},
        {'aa':987,'bb':111111},
        {'aa':654,'bb':111111},
        {'aa':321,'bb':111111},
        {'aa':556,'bb':111111},
        {'aa':223,'bb':111111},
        {'aa':112,'bb':111111},
        {'aa':889,'bb':111111},
        {'aa':778,'bb':111111},
        {'aa':998,'bb':111111},
        {'aa':447,'bb':111111},
        {'aa':852,'bb':111111},
        {'aa':741,'bb':111111},
        {'aa':963,'bb':111111},
        {'aa':369,'bb':111111},
        {'aa':258,'bb':111111},
        {'aa':147,'bb':111111},
        {'aa':753,'bb':111111},
        {'aa':159,'bb':111111},
        {'aa':999999,'bb':999999999999},
        {'aa':999,'bb':999999},
        {'aa':9,'bb':999999999},
        {'aa':99,'bb':999999999}
    ];
 var isfirst=true;
 function upajaxload(){//加载处理  
  if(isfirst){
   isfirst=false;
   setTimeout(function(){
    page+=1;
    for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
     if(i<jsondata.length){
      $(".demo").append('<div class="list"><p>'+jsondata[i].aa+'</p><p>'+jsondata[i].bb+'</p></div>');
     };
    };
    myScroll.refresh();//刷新结构
    isfirst=true;
   },1000);
  }
 };
  
});
</script>
<style type="text/css">
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
html {
 -ms-touch-action: none;
}
*{
 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;
}
#requestf5{position:absolute; width:100px; height:20px; line-height:20px; text-align:center; 
left:50%; margin-left:-50px; top:45px; z-index:2; opacity:0;}
.demo{ background:#FFF;}
.demo .list{ height:200px;}
</style>
</head>
<body>
<div id="header">iScroll</div>
<div id="requestf5">请求刷新</div>
<div id="wrapper">
 <div id="scroller">
  <div class="demo">
         <div class="list">
             <p>1</p>
                <p>1111111</p>
            </div>
            <div class="list">
             <p>2</p>
                <p>222222</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>333333</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>444444444</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>5555555555</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>666666666666</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>777777777</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>888888888</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>9998999</p>
            </div>
            <div class="list">
             <p>1</p>
                <p>9999999999999999</p>
            </div>
        </div>
 </div>
</div>
<div id="footer"></div>
</body>
</html>

非常粗糙的基本结构就出来了！下拉显示刷新操作，其实应该清空重新载入，我没有去模拟

同样显示的刷新提示还可以做非常细致的修饰，我们是可以获取上一步的y值得，与当前值比较，我们在回弹的时候还可以二次修饰变化

上拉提示同下拉添加

同样在显示加载数据的时候我们可以利用css3的处理显示

四.非常简单的模拟实例下载

http://www.oschina.net/code/snippet_2352644_51591

来源：oschina

链接：https://my.oschina.net/u/2352644/blog/519259

标签