本文详细介绍了ISCroll 5.x版本的使用方法，包括如何配置基础环境、加载必要的JavaScript文件、监听和处理各种滚动事件，以及如何通过API进行下拉刷新和上拉加载更多功能的实现。
一.准备环节
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