在原生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
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
同时，注意一点，当你使用ajax添加或者删除一些新的元素时，要重新myScroll.refresh()一下，会重新计算maxScrollY区域的，以保证区域覆盖的正确性，这些东西，如果你真的使用到，那么肯定可以碰到这些问题的，所以，这里是我话多了~~~
OK，代码就是这样了，在写这个文章的时候，旁边没有Android的设备，所以，没有进行测试，只测试了IOS8的设备，所以，如果有问题，请指出，谢谢~~
上述例子的demo地址：下拉，上拉刷新demo。
也可以扫描二维码：
总结
我的本意是把这个方法，写成一个基于iscroll的插件，但当前还没有完成，所以现在只给出一个最简单demo，待我闲暇时间，把该插件进行完善一下。
注：本例中引入的iscroll.js经过了作者本人的一些修改，所以跟官网的代码，有出入，如需验证该问题，请自行下载demo。
也可点击链接：下载demo
如有问题，也请不吝指教，谢谢！
本文地址：http://www.zhangyunling.com/?p=359