基于iscroll实现下拉和上拉刷新(优化)

写在前面

在之前,是有写过一篇相同的文章(基于iscroll实现下拉和上拉刷新),这里把之前的那个插件进行了重写,使得该插件使用起来更为简便,同时,也把一些效果,变得更为的流畅简单,甚至连配置参数都是变化之后的,接下来,就简单的介绍一下,该插件的使用方法。

下拉刷新–详情介绍

  1. 基本介绍

    函数命名:XMSScrollFrame

    函数调用:new xmsCore.XMSScrollFrame(scrollId,options)

    参数:scrollId和options介绍,请继续向下看。

  2. 基本架构

    移动端的框架,所以库方法使用的是Zepto.js(当然肯定是支持jQuery了),因为其文件小。下拉加载,也使用了IScroll插件,这是插件XMSScrollFrame中,必须包含的两个库文件。

    请直接使用在DEMO引入的Zepto和IScroll,因为IScroll插件,是经过了一些简单的更改,如果您想使用最新版的IScroll,请确保,把旧版本的改动,自己添加到最新版的IScroll版本中。(请确保,您对IScroll有一定深度的自己认识,以保证您添加的代码,不会影响到这个插件的原有功能。)

  3. 传入参数介绍

    传入的参数格式,参考自IScroll的初始化格式,所以,传入一个参数scrollId,用来表示,需要初始化的区域Id,额外传入一个对象options,用于保存一些配置参数。

    options的大多数参数,是IScroll的参数,所以,如果想要查看更详细的参数设置,请参考:IScroll官方网站

    为了能完成本插件的功能,额外的添加了以下的参数:

    参数名 默认值 相关说明
    downFn null 下拉刷新被触发时,执行的回调函数。

    内部this指向XMSScrollFrame的实例


    传入一个参数为下拉时,展示下拉动作的DIV的Zepto对象
    upFn null 上拉刷新被触发时,执行的回调函数。

    内部this指向XMSScrollFrame的实例


    传入一个参数为上拉时,展示上拉动作的DIV的Zepto对象
    downStatus true 设置下拉功能的状态。
    默认值为true,表示下拉功能打开
    如果不需要下拉功能,那么把该值设置为false
    upStatus true 设置上拉功能的状态。
    默认值为true,表示上拉功能打开
    如果不需要上拉功能,那么把该值设置为false
  4. 实例方法介绍

    该方法,既然在初始化时,是有设置上拉,下拉的模块是否启用的功能,那么在实例之后,就必须有开启和关闭上拉下拉功能的模块,所以,这里介绍一下,该实例中,包含的一些,供以后使用的方法,以及一些可操作的属性。

    在接下来的列表中,我会把一些比较重要的属性和方法,一一说明,这些属性和方法,在实际的项目中,会被使用到。(说明顺序,随机)(假设实例化后变量为scrollFrime

    参数名 默认值 相关说明
    scrollFrime.wrapper Zepto对象 初始化下拉刷新的区域。

    该插件,需要一个固定的结构,在下面的文档中,我会给出一个特定的结构,并以特定的结构为示例,分别说明实例中的属性所代表的元素。
    scrollFrime.downDiv Zepto对象 在下拉之后,会有一个下拉后的提示信息,它是一个className="frame-scroll-down-ele"的元素。
    scrollFrime.upDiv Zepto对象 在上拉之后,会有一个上拉后的提示信息,它是一个className="frame-scroll-up-ele"的元素。
    scrollFrime.myScroll IScroll实例 本插件,是基于IScroll实现的,为了能更具备扩展性,所以,把IScroll的实例直接保存到了myScroll属性上。

    关于IScroll实例支持的属性,请直接查看:IScroll官方网站
    scrollFrime.downSwitch(status) function 下拉刷新功能的开关

    传入的status=false时,表示关闭下拉功能。

    设置为任意其他值,都表示打开下拉功能。

    为了能对以后有更好的扩展,方能操作。
    scrollFrime.upSwitch(status) function 上拉刷新功能的开关

    传入的status=false时,表示关闭上拉功能。

    设置为任意其他值,都表示打开上拉功能。

    为了能对以后有更好的扩展,方能操作。
    scrollFrime.downSucc() function 下拉功能被触发时,页面的顶部,会出现一个特殊的样式

    这个时候,去执行一些操作,当操作完成之后,是需要更新数据(或者其他的操作),顶部的特殊样式消失。
    只所以这么写,是为了能更好的扩展
    scrollFrime.upSucc() function 上拉功能被触发时,页面的顶部,会出现一个特殊的样式

    这个时候,去执行一些操作,当操作完成之后,是需要更新数据(或者其他的操作),顶部的特殊样式消失。
    只所以这么写,是为了能更好的扩展
  5. 固定结构

    移动端页面,在以后需要一种固定的结构,请参考后面的示例中的布局。

    这里,我取其中的一部分,进行一次说明:

    			
    <body class = "frame-wrapper">
    
    1
    2
    </body>

    一些说明

    1. 在下拉刷新中,显示状态的地方,是class = "frame-scroll-down-ele"div,上拉刷新更改的是class = "frame-scroll-up-ele"div
    2. 如果需要给他们添加不同的显示格式,那么就可以在这两个DIV内部,添加不同的子元素即可。
    3. 在整个下拉或者上拉的过程中,会根据不同的状态,给这另个DIV添加不同的className,下面一一的说明。
    4. 当下拉到一定程度之后,就是出现一种状态,比如“下拉可刷新”等,那么这个时候,会给这对应的div添加一个样式:frame-scroll-load,这个时候,是提示,下拉可刷新。您松开手的时候,就会触发下拉刷新的功能。
    5. 而当触发下拉刷新功能之后,就会去除frame-scroll-load,然后重新添加一个名为frame-scroll-loaddingclassName,这个时候同时会触发,实例化该方法时,传入的downFn,请参考上面的介绍。
    6. 上拉时,有相同的处理。这里就不做介绍。
  6. 测试示例

    示例:测试

    移动端可以扫码直接查看DEMO哦,
  7. 测试示例

    示例:测试,不占满一屏时,仍然可以下拉刷新和上拉加载

    移动端可以扫码直接查看DEMO哦,

总结

对IScroll实现下拉刷新和上拉加载插件的重写,使得该插件使用更简单,更流畅,也支持了如果首次加载时,内容没有占满一屏而导致的无法下拉的问题,并且可以自定义开启和关闭下拉和上拉的API接口等。

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

下面提供了一个最简单的DEMO,也是该功能相关的所需的必要的JSCSS,以及基本的HTML结构,请参考:下载demo

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

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

发表评论

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

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

基于iscroll实现下拉和上拉刷新(优化)》有11个想法

  1. 为什么上面的2个demo在chrome浏览非 手机模拟器下有效果,在chrome浏览器的手机模拟器中看不到效果?

    1. 监听的事件处理不一样吧,我没有去看代码,不过可能是在浏览器中,mouse事件与touch事件,冲突了,在手机上只有touch事件,在非模拟器只要mouse事件,模拟器中,可能是这两者都有,所以出的问题,这个之后有时间,可以看看

  2. 過愘说道:

    您好,我发现你这个案例在UC浏览器下有加载数据时有严重的抖动现象,不知是什么原因,看没有优化前的案例反而没有这个问题。。。,请问怎么解决。

  3. 過愘说道:

    您好,我发现这个例子放在Uc浏览器中加载时又严重的抖动现象,其他浏览器没有问题,查了好久不知道啥原因。。。,你以前的好像没有这个问题

    1. 您说的应该是在Android设备下的情况吧?Android的UC浏览器,我也发现过您说的抖动的情况,我有稍微看了一下情况,应该是浏览器对于滑动效果的处理有关,IScroll中的滑动处理模块,在Android的一些浏览器中的支持性是很差的,当时发现的时候,模块的滚动都是有晃动的情况的,虽然发现了这个问题,但是我本人对IScroll的这部分功能,并没有深入的研究,以及查找解决方案,所以在UC浏览器下的这个问题,我暂时也没有解决方案。

      您说,在没有优化的代码中没有抖动,非常感谢您能提出这个差异,这样我可以根据这个差异,去确认这个bug的问题在哪,之后我会在闲了抽时间去研究下这个,但是现在的话,我没有解决方案,不好意思!

      因为有时候事情比较多,会隔一段时间,才来看下的,不好意思啊~~

  4. taojin说道:

    从 var myScroll = new IScroll(scrollId, options); 开始后便不能点击A标签以及触发事件

    1. 您好,我发现这个demo在UC浏览器中滑动、上拉刷新时有严重的抖动现象,请问怎么解决。

  5. 淘金说道:

    你好,这个版本在手机浏览器下好像会有很难点击A标签的情况以及很难触发事件。

    1. IScroll插件,对于A标签做了额外的处理,所以如果你想要使用JS去触发A标签,是不起作用的,这个你可以对比一下,你去触发一个DIV的点击事件。

      或者,你试着去触发A标签的内容,使用事件的冒泡试试(我没有尝试)。

      还有就是,options对象中,需要把click属性设置为true的,(这个应该设置了,不然不能执行点击的)。

      A标签比较特殊,你可以试着,给A标签加个自定义事件,当你想要触发A标签的点击事件时,用JS去触发这个自定义事件,在这个自定义事件内部,执行你A标签的一些处理逻辑。

      暂时,我只能想到这些了。

  6. 徐君文说道:

    你好,如果我的一个页面有多个div,类似于tab那种,每个tab都需要下拉刷新,你这限制了只能初始化一次,如何办?

    1. 在初始化的时候,不是有一个downFn的属性吗?我这里虽然是把文章命名为了下拉刷新,但是这个插件的功能,并没有执行去刷新的的功能啊,所有的操作,都是你在downFn处理的,只要你在切换TAB的时候,设置一个标志位或者一个中间变量,让你知道,当前的活动的TAB是哪个,那么当下拉动作被触发时(执行downFn时),你在这个函数内部,执行不同的操作就可以了。

      执行完成之后,再调用实例中的downSucc()方法,即可。你看下我文章中,给的示例中的初始化源代码,应该就能理解了。

      如果我说的这些,你理解不了,那麻烦再说一下你的疑问吧。