iscroll

在原生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自行修改。

<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都是我懒的缘由，加入的框架。

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

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 = 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") } });