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

重要提示

本插件已经经过更新,查看更新的插件代码,以及介绍请查看:基于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部分这里就不多说了,有兴趣的可以直接保存该网页,然后把相关代码分离即可,对应的JSCSS代码,分别为iscroll.jsiscroll.css文件,其他的bootstrapjquery都是我懒的原因,加入的框架。

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


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


同时,注意一点,当你使用ajax添加或者删除一些新的元素时,要重新myScroll.refresh()一下,会重新计算maxScrollY区域的,以保证区域覆盖的正确性,这些东西,如果你真的使用到,那么肯定可以碰到这些问题的,所以,这里是我话多了~~~

OK,代码就是这样了,在写这个文章的时候,旁边没有Android的设备,所以,没有进行测试,只测试了IOS8的设备,所以,如果有问题,请指出,谢谢~~

上述例子的demo地址:下拉,上拉刷新demo

也可以扫描二维码:

总结

我的本意是把这个方法,写成一个基于iscroll的插件,但当前还没有完成,所以现在只给出一个最简单demo,待我闲暇时间,把该插件进行完善一下。

注:本例中引入的iscroll.js经过了作者本人的一些修改,所以跟官网的代码,有出入,如需验证该问题,请自行下载demo。

也可点击链接:下载demo

如有问题,也请不吝指教,谢谢!

本文地址:http://www.zhangyunling.com/?p=359

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

基于iscroll实现下拉和上拉刷新》有22个想法

  1. 王瑞昆说道:

    mac系统下,chrome f12模拟不能拉动,抖动问题怎么处理的呢

    1. 模拟器中,毕竟还是在浏览器么,所以支持的鼠标事件毕竟多,比如还是会有mouse类事件,还有pointer类事件,而在iscroll中,对于这些事件,都有做了处理,所以导致事件的处理进行冲突了,在移动端就不会有这样的问题了。

      你可以设置options中的属性,new IScroll(scrollId,{“disableMouse”:true,”disablePointer”:true});

      把这样的影响因素关闭,在模拟器中,就可以毕竟流畅了。

      试一下这样的处理,是不是你想要的结果呢。

  2. 西风说道:

    是不是有一个问题,内容不满屏,页面动不了啊

    1. 对的,所以可以去本文指向的另外一个地址去看看,那个处理了这个问题的。

  3. 梁荣枝说道:

    问题解决了,这样就可以,多谢大神代码
    myScroll = new IScroll(‘#wrapper’, {click:true});

  4. 梁荣枝说道:

    myScroll = new IScroll(‘#wrapper’, {click:true});

  5. 梁荣枝说道:

    我加载出来的东西上的a链接点不了,我按上面的哥们加了myScroll = new IScroll (‘#wrapper‘, { preventDefault:false}); a链接好使了,但是上下拉时出现了抖动的现象,我调很久也没调出来,这是怎么回事呢?请教大神

    1. 梁荣枝说道:

      问题解决了,这样就可以,多谢大神代码

  6. 匿名说道:

    楼主好,问下如果下拉刷新时ajax请求完在让顶部的下拉刷新退回去该怎么处理

    1. 你看下文中示例的源代码,初始化为一个实例之后,这个实例中,有一个方法叫做:downSucc方法,可以直接调用scrollFrime.downSucc(),表示下拉的的功能结束了,就可以退回去了。您试一下吧。

    2. 这个,你还是看看另外的一篇吧,这篇文章中的,这个结构写的不好,可扩展性不行,所以优化过一次,您可以看看:基于iscroll实现下拉和上拉刷新(优化)

  7. 您好,我发现”优化后的界面demo“在UC浏览器中滑动、上拉加载时有严重的抖动现象,请问怎么解决?(ps:优化后的界面,一直提交不成功。)

    1. 你这里说的,提交不成功,是什么意思?这个插件中,没有处理提交相关的逻辑的,这个,我暂时不能理解您的意思。

  8. 小简说道:

    谢谢,真是帮了我一个大忙,我之前用的是isrcoll4滚动进行的时候再次触摸屏幕会出现白屏然后跳到页面最底部,现在用isroll5没有这样的问题,只是某些安卓自带浏览器页面上面A标签的onclick事件无效,也已经解决了,在这分享一下,就是实例化IScroll的时候把preventDefault设为false,如下:
    myScroll = new IScroll (‘#wrapper‘, { preventDefault:false});

  9. Justin说道:

    您好,当ul里的内容不满一屏的时候 就无法下拉刷新了,这个有没有什么解决的思路可以指导一下?万分感谢!

    1. 这个是因为,原则上,如果不满一屏的话,是说明数据量很少的,所以就不需要下拉刷新的,我之前是这么想的,解决方法就是,你给ul设置一个最低高度,只要这个最低高度大于一屏的高度,就可以执行下拉刷新的,因为IScroll这个插件,只有滑动区域大于显示区域的时候,才会可滑动呢。试试有效不。

      sorry,最近比较忙,所以才看到。

      1. 楼主 设置最小高度没用啊 怎么解决啊

        1. 如果设置最小高度无效的话,很有可能是你HTML的结构或者CSS中的一些设置出了问题,这个我暂时也没有办法知道,你那边是因为什么原因导致这个问题。

          如果现在还有这样的问题,那么可以查看这个示例:下拉刷新

          以及该插件重写后的插件:基于iscroll实现下拉和上拉刷新(优化)
          可以下载一个最简的DEMO

  10. 楼主好,最近有更新了哪些内容?

    1. 你好,最近都没有时间整理了,所以也没怎么更新了,忙过这段时间再恢复了,不过应该是Nojde的学习方面为主,谢谢关注!

  11. Tibbers说道:

    兄弟, 用了你的代码特来表示感谢!!!!

    1. 放在这里,本来就是希望有人能用到的,这个东西在最近有些更改,之后再更新一下,有什么问题,也可以提出来一下。共同进步