基于iscroll实现下拉和上拉刷新

原文   http://blog.csdn.net/cdnight/article/details/44963063

在原生

APP

的开发中，有一个常见的功能，就是下拉刷新的功能，这个想必大家都是知道的，但是原生

APP

的开发，有一个很大的问题就是，你每次更新一些功能，就要用户重新下载一次版本，尤其是在

IOS

系统中，新版本还需要经过审核才能通过，这就使得版本的更新受到很大的限制，而如果我们改用网页来展示，那么只要改变服务器中网页的内容，那么就等于修改了

APP

的内容展示，有更灵活的满足更新版本。

概述

但是有一点就是，如何让

web

实现的页面，看起来更像是原生的

APP

呢，首先要想办法解决的就是下拉刷新的功能，对于这个功能，我并没有在网络上找到很好的解决方法，并且，我个人对手机端的开发，经验还是有些欠缺，这里就不罗列使用

JS

实现

web

页下拉刷新的功能了。

这里，我基于

iscroll5

的基础上，进行了少量的改动源代码，进而实现了下拉属性的功能，所以分享在这里，仅供参考。

关于iscroll插件

iscroll

插件（官网地址）当前最新的版本是

version
5

版本，相对于版本

4

，我个人觉得，版本

5

变得更具有灵活性，虽然移除了一些特定的事件，特定的对外接口，但是对于使用该插件的程序员们，这个插件变得更具有操控性，这是我比较喜欢的一种插件类型，但同时，也发现了一些问题，事件中的

touchend

事件，不存在了（确切的说，不能说是不存在），只是被拦截了，所以一些基本的事件，都被进行了拦截，而导致无法监听到

touchend

事件，只能检测到

scrollEnd

事件，

scrollEnd

事件，是在页面滚动停止时，才会被触发的，所以~~

所以，根据版本

5

，无法检测到，是不是下拉了一段距离之后，松开时的动作了，对此，我也检查了源代码，也没有发现这个功能的实现方法，不得已，只能对源代码进行了少量的修改，所以就有了本篇文章。

修改后插件的使用

基本上，该方法并没有进行多少的修改，只是添加了两个事件的监听类型，一个叫做“

slideDown

”，表示下拉被触发，另一个叫做“

slideUp

”，表示上拉被触发。

其他，实例化中，各属性都没有进行更改，所以，关于

iscroll

的使用，直接参考官网的说明：iscroll官网。

这里，我只对新添加的事件，添加一个

demo

测试，这个

demo

是一个很简单的

demo

，也只是用来说明新添加事件的用法的，如果需要用到下拉刷新或者上拉刷新的朋友，可以根据本

demo

自行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="wrapper">
<div id="scroller">
<div id = "scroller-pullDown">
<span id = "down-icon" class = "icon-double-angle-down pull-down-icon"></span>
<span id = "pullDown-msg" class = "pull-down-msg">下拉刷新</span>
</div>
<div id = "scroller-content">
<ul>
<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 46</li>
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
<div id = "scroller-pullUp">
<span id = "up-icon" class = "icon-double-angle-up pull-up-icon"></span>
<span id = "pullUp-msg" class = "pull-up-msg">上拉刷新</span>
</div>
</div>
</div>

CSS部分这里就不多说了，有兴趣的可以直接保存该网页，然后把相关代码分离即可，对应的

JS

和

CSS

代码，分别为

iscroll.js

和

iscroll.css

文件，其他的

bootstrap

和

jquery

都是我懒的原因，加入的框架。

对上述的结构进行实例化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon");

myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });
//probeType属性，表明此插件，可以监听scroll事件

myScroll.on("scroll",function(){
//scroll事件，可以用来控制上拉和下拉之后显示的模块中，
//样式和内容展示的部分的改变。
var y = this.y,
maxY
d324
= this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon");

if(y >= 40){
!downHasClass && downIcon.addClass("reverse_icon");
return "";
}else if(y < 40 && y > 0){
downHasClass && downIcon.removeClass("reverse_icon");
return "";
}

if(maxY >= 40){
!upHasClass && upIcon.addClass("reverse_icon");
return "";
}else if(maxY < 40 && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon");
return "";
}
});

myScroll.on("slideDown",function(){
//当下拉，使得边界超出时，如果手指从屏幕移开，则会触发该事件
if(this.y > 40){
//获取内容于屏幕拉开的距离
//可以在该部分中，修改样式，并且仅限ajax或者其他的一些操作
//此时只是为了能演示该功能，只添加了一个alert功能。
//并且，由于alert会阻塞后续的动画效果，所以，
//添加了后面的一行代码，移除之前添加上的一个样式
alert("slideDown");
upIcon.removeClass("reverse_icon");
}
});

myScroll.on("slideUp",function(){
if(this.maxScrollY - this.y > 40){
//与slideDown相同的，maxScrollY表示文档区域的最大高度
alert("slideUp");
upIcon.removeClass("reverse_icon")
}
});

同时，注意一点，当你使用

ajax

添加或者删除一些新的元素时，要重新

myScroll.refresh()

一下，会重新计算

maxScrollY

区域的，以保证区域覆盖的正确性，这些东西，如果你真的使用到，那么肯定可以碰到这些问题的，所以，这里是我话多了~~~

OK，代码就是这样了，在写这个文章的时候，旁边没有

Android

的设备，所以，没有进行测试，只测试了IOS8的设备，所以，如果有问题，请指出，谢谢~~

上述例子的demo地址：下拉，上拉刷新demo。