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

时间 2019-11-12

标签三教九流系列 iscroll.js iscroll 页面下拉刷新加载等效实现栏目 JavaScript 繁體版

原文原文链接

一.准备环节javascript

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

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

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

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

js部分作出修改以下：css3

<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标签调用的载入去掉，这样看着才舒心：git

<body>

：：：：：最重要的一点，在引入类库的目录下咱们能够看到不少iscroll.js的类库文件，咱们选择下面的，这是事最全的，能够保证全部api被支持：github

咱们引入js部分代码改为以下：web

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

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

二.接口使用和基本封装

----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