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

Posted 墨者杨恒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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自行修改。

  • 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部分这里就不多说了,有兴趣的可以直接保存该网页,然后把相关代码分离即可,对应的JSCSS代码,分别为iscroll.jsiscroll.css文件,其他的bootstrapjQuery都是我懒的原因,加入的框架。

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

  • 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 = 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

以上是关于基于iscroll实现下拉和上拉刷新的主要内容,如果未能解决你的问题,请参考以下文章

使用iScroll实现上拉或者下拉刷新

react native Expo完全基于ScrollView实现的下拉刷新和上拉触底加载

Iscroll4 实现下拉刷新,上拉加载,现在出现一个问题,就是当我在下拉刷新的同时,马上进行上拉

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

Android实现RecyclerView的下拉刷新和上拉载入很多其它