关于iscroll插件
iscroll插件（官网地址）当前最新的版本是version 5版本，相对于版本4，我个人觉得，版本5变得更具有灵活性，虽然移除了一些特定的事件，特定的对外接口，但是对于使用该插件的程序员们，这个插件变得更具有操控性，这是我比较喜欢的一种插件类型，但同时，也发现了一些问题，事件中的touchend事件，不存在了（确切的说，不能说是不存在），只是被拦截了，所以一些基本的事件，都被进行了拦截，而导致无法监听到touchend事件，只能检测到scrollEnd事件，scrollEnd事件，是在页面滚动停止时，才会被触发的，所以~~
所以，根据版本5，无法检测到，是不是下拉了一段距离之后，松开时的动作了，对此，我也检查了源代码，也没有发现这个功能的实现方法，不得已，只能对源代码进行了少量的修改，所以就有了本篇文章。
修改后插件的使用
基本上，该方法并没有进行多少的修改，只是添加了两个事件的监听类型，一个叫做“slideDown”，表示下拉被触发，另一个叫做“slideUp”，表示上拉被触发。
其他，实例化中，各属性都没有进行更改，所以，关于iscroll的使用，直接参考官网的说明：iscroll官网。
这里，我只对新添加的事件，添加一个demo测试，这个demo是一个很简单的demo，也只是用来说明新添加事件的用法的，如果需要用到下拉刷新或者上拉刷新的朋友，可以根据本demo自行修改。
html代码
| 代码如下 | 复制代码 |
|
<div id="wrapper"> <div id="scroller"> <div id="scroller-pullDown"> <span id="down-icon" class="icon-double-angle-down pull-down-icon"><img src="./images/loading.gif"></span> <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span> </div> <div id="scroller-content"> <ul class="list"> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul> </div> <div id="scroller-pullUp"> <span id="up-icon" class="icon-double-angle-up pull-up-icon"><img src="./images/loading.gif"></span> <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span> </div> </div> </div> |
|
js代码
| 代码如下 | 复制代码 |
|
$(function(){ var myScroll, upIcon = $("#up-icon"), downIcon = $("#down-icon") target = $(".list"), temp = " "; 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") temp='<li>我是新加进来的</li>\ <li>我是新加进来的</li>'; target.before(temp); myScroll.refresh(); } }); myScroll.on("slideUp",function(){ if(this.maxScrollY - this.y > 40){ //与slideDown相同的，maxScrollY表示文档区域的最大高度 //alert("slideUp"); //upIcon.removeClass("reverse_icon") temp='<li>我是新加进来的</li>\ <li>我是新加进来的</li>'; target.append(temp); myScroll.refresh(); } }); }) |
|
css代码我就不贴出来了，看demo里，很简单了。
最后，注意一点，当你使用ajax添加或者删除一些新的元素时，要重新myScroll.refresh()一下，会重新计算maxScrollY区域的，以保证区域覆盖的正确性，这些东西，如果你真的使用到，那么肯定可以碰到这些问题的，所以，这里是我话多了~~~