iScroll 5 刷新封装实例应用
一.准备环节
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