西门的后花园

一个热爱网络的年轻人的博客

移动端下拉刷新、上拉加载更多 Zepto/jQuery插件

去年国庆后,手上项目不多,研究了下手机浏览器里下拉刷新、上拉加载更多这种效果,当时效果是仿照微博客户端来弄的,写了个简单的demo就放在GitHub上没管他了。

一直到这个月,合作项目的开发同事做APP内嵌页,要我增强加载数据体验,跟APP效果一致,所以我就把这段代码拿过来用。用了才发现之前的代码有很多没考虑到的地方,改了一下,用在项目里,暂时还没测出什么bug,所以就放出来,大家如有需要,也可以使用一下。

当然,手机浏览器里的效果肯定没法跟APP原生的比,只能说有总比没有强。

GitHub地址:https://github.com/ximan/dropload,感兴趣的话不要吝啬Star。

所有信息都写在GitHub的readme里,因为那边更新代码比较方便,所以本文更新会比较慢。最近GitHub被攻击了,访问速度较慢。我也把代码上传一份到博客,预览会比较方便。本博客的代码不能保证是最新版,最新版肯定在GitHub上,切记。

DEMO1,加载底部

DEMO2,加载顶部、底部

DEMO3,固定布局,加载顶部、底部

在使用中有什么建议或者bug,请留言反馈,或者在GitHub上提Issues。

发现有挺多人需要这个插件的,不过都在使用中遇到一些问题,建了个QQ群,希望大家一起交流更方便:群号:290725368,点击加群

评论列表

  1. 不错呀,谢谢分享!

  2. 试了,效果真不错!

  3. Github 已经好了~~

  4. Sunny

    下拉刷新加载,当我加载完数据以后我怎么禁止他访问服务器

  5. king

    我发现只要拖动就获取,我只想最顶部和最底部拖动的时候才获取。

  6. zhao

    写的不错! ❗ 但会有抖动情况!当像上拉的时候!拉住不放,轻轻启动的时候,抖动很厉害!测试手机5s,左手出现几率比较大!。。

  7. 楼主问下:可能上面我把问题没有说清楚。首先不刷新,我直接上拉加载数据,这样就不能加载数据,如果我开始下拉刷新后,再上拉加载是可以的,当我继续3次后,就不能继续加载,得需要下拉更新后,才能激活上拉加载。

  8. Rocky

    写的真不错 :mrgreen: ,请教楼主,当上拉之后一直不松手,保持释放加载的状态就抖动的很厉害,另外有时候释放加载会卡在那里不动,怎么解决呢? 🙄

  9. 啸天

    插件是不是没有提供下拉没有拉到数据,下方提示的样式?

  10. damon

    你好,我发现下拉到第12次后,这个js就会失效了加载不了东西,我只是一个静态页。

  11. 您好 三星i317 有 a 标签不能点击 ,能滑动不能加载

  12. 是非

    有个问题,如果下拉刷新,第一次可以执行,不能执行第二次了,然后上拉也拉不动了.如果不执行下拉,上拉可以执行多次.

  13. hwl2016

    放到服务器上好像不行

  14. milkProtien

    ❓ 看了源码,下拉加载有bug吧,me._childrenHeight <= (me._loadHeight+me._scrollTop)
    很容易就满足条件加载了。就算是你的demo 也出现向下滑一下就加载的情况
    我用的我用的是坑爹的微信浏览器。
    其实我也不明白为什么是这个条件。。。

    • milkProtien

      👿 是我布局的问题。总算明白什么是这个条件了。

      • wjh

        能解释下这是怎么回事吗

        • milkProtien

          demo最外面的div是绝对定位的。还要height: 100%;,不然me._loadHeight就不会等于$(window).height();加载条件就会出现问题。还有也影响动画效果。用这种布置是为了做这个动画容易吧!没有深究 ❓

          • wjh

            那这个demo布局要改吗 为什么加载一两次就不能再加载了

            • milkProtien

              不是要改,是基本要按demo的布局来用。如果出错你看看是不是有和demo有不同的地方。

              • wjh

                me._childrenHeight 这个随着每次的加载越来越大 后来就不满足<(me._loadHeight+me._scrollTop)的条件了

                • 这个问题是我之前没考虑到,大部分人跟我的布局方式不一样,已经更新了,请去github查看

    • milkProtien

      🙁 因为只是想用来做评论的下拉加载。这个插件不能用啊。为什么要把布局写死来得到窗口的高度?(:wink: 我搞后端,对css盒子没有研究不深如果说错见谅)
      看了你插件代码一天受益匪浅。js果然好玩。

  15. fubb

    同样出现 按住不放出现抖动情况 🙁

  16. dsfsd

    你好~ 在微信全屏的时候不能滑动 最外层div是全屏fixd固定的 里面的div是有滚动条 向上滑动会出现该网页由XXX提供

  17. dsfsd

    在苹果手机上会出现这样的问题

  18. 小林

    请问,要怎么用js 主动去触发下拉刷新呢?

    • 没写这个,因为我当时考虑是页面一加载,默认数据都展示到页面,不需要js去取数据

      • 小李

        如果一个页面有几个分类,比如有ABC3个班级,页面默认加载显示A班级的所有学生,下拉加载都是A班的学生,这个时候点击一下B或C 怎么去加载相应的班级呢?

  19. xiaolei

    手机上,加载的时候,抖动很厉害。。尤其是下面有固定的菜单的时候,安卓4.4.2

  20. jason

    用了artTemplatemo模板,这效果实现不了,有影响吗?

  21. jason

    artTemplate

  22. jason

    留个邮箱

  23. yhy

    😕 盼回复,直接发邮件给我,万分感谢!

  24. leisang

    楼主你好,我在使用你的插件时发现这么个问题,环境是iphone6,safari浏览器,
    每次往上拉的时候,都需要拉2-3次才能触发事件,按我的判断可能第一次是100%触发了浏览器本身的滑动,第二次或第三次才触发div自己的滑动,不知道为什么会这样,求解。
    还有就是往上拉的时候不放手,手指往下移一下,屏幕就会强烈抖动。

    • 确实是需要2次,第1次是把整个网页拉到见底,第2次才会判断,然后执行loading。
      另外你说的抖动,跟我这个js实现办法也有关系,实时计算网页的scroll值和loading的高度导致的。

  25. 博主好,我现在用这个插件遇到了一个问题,下拉不送会提示释放刷新,这个时候如果不松手向上拉动更大距离,这个时候下拉失效,再上拉是也失效;同样向上拉住不放,突然向下拉动更大距离,这时上拉失效,再下拉也会失效。这个问题可以解决的吗?

  26. 北城

    为什么上拉没有效果》

  27. yope

    我用的是0.4.0(150927) 怎么下滑就刷新了 请问博主这是什么情况呀

    • 请看我github里的demo,是否也存在此问题?如果有,请回复一下手机型号和浏览器,谢谢

      • yope

        chrome 都不行
        更不用说手机型号了 (手机的话是安卓5.0.1)

      • yope

        github 里面的没问题 我和demo 的差别就在<script src="js/zepto.min.js"></script>和 <script type="text/javascript" src="lib/jquery/jquery.js"></script> 的区别吧

        • 你好,刚刚使用了jQuery1.11.3和2.1.4(最新版)都试了下,没有你说的下滑就刷新。是否有具体demo,可以发给我email里,我试试,看是不是哪里没有配置对,或者布局问题。直接回复这封邮件即可。

  28. 過愘

    为什么我用0.4.0还是会没有滑到下面就去加载数据了,看你demo都没问题。。。

  29. 過愘

    我电脑关了,昨天等了好久结果你没看。10点下课后回去开。准备一天不关机 🙄

    • 哈哈,本地的环境啊。
      建议写个简单的demo,发我邮件,或者找我买个主机,这样就有网站啦 :mrgreen:

      • 過愘

        还在测试,所以没有部署上去(不过阿里云快过期了 ❓ )。demo的话估计抽出来的时间有点长,还有数据什么的不好弄,我用的是j2ee

  30. 轩宇

    未滑动到底部就加载了,是什么情况,我下载的js是最新的,还是有这个问题

  31. 轩宇

    有这个参数的,请问调用的时候只需要这个代码:$('.element').dropload({
    – loadUpFn : function(me){
    – $.ajax({
    – type: 'GET',
    – url: 'json/update.json',
    – dataType: 'json',
    – success: function(data){
    – alert(data);
    – // 代码执行后必须重置
    – me.resetload();
    – },
    – error: function(xhr, type){
    – alert('Ajax error!');
    – me.resetload();
    – }
    – });
    – },

    • 对的,最简单的这种就可以了,你可以在function里console.log打印一下。
      详聊可以加QQ群,文章末尾

      • 轩宇

        加群,没反应呀,我这个数据不是在页面写死的,是从后台服务器拿的,所以在向服务器发送请求的时候,我用的是自己后台,这个和未滑到底部就加载了有影响吗

  32. html5

    代码中如果有其他js必须还要一并引入jquery.js或者jquery.min.js文件的话,这个上拉下拉效果就会冲突不起作用了,删除掉jquery.js可以正常,但其他js效果就没有了,这个要怎么解决呢?

  33. html5

    在ajax加载执行代码中,上拉刷新下拉加载数据列表后的内容里,含有点击执行某些js方法的话,这些操作也是没有效果,请教有什么方法解决吗?再有上拉加载的时候高度一直是保持在最初的高度,而不是像下拉刷新一样高度可以自动向下撑开,是什么原因呢?谢谢!

  34. html5

    有委托的案例吗?这块运用接触的较少

  35. 烤甜点

    请问下拉会抖动解决了吗,看起来不是我一个人遇到了这个问题

  36. phper

    楼主 本地上可以用 但为什么 在微信浏览器上面就完全没有效果了

  37. ljc

    // 判断滚动区域
    if(me.opts.scrollArea == window){
    me.$scrollArea = $win;
    }else{
    me.$scrollArea = me.opts.scrollArea;
    }
    大神,,问个问题,,项目里面的判断是对的吗 if(me.opts.scrollArea == window)这块。。。貌似永远不成立吧

  38. 东门

    ❗ 😮 😯 :mrgreen:

  39. 收到

    我想问下,问什么在这个插件的网页里面再加入jquery1.3.min.js ,就报错了,整个jquery1.3都用不了了?怎么解决呢?

  40. hector

    可以再加一个状态属性,避免不断清空插入。。。

  41. hector

    上拉加载 用me._childrenHeight <= (me._meHeight+me._scrollTop)判断?

  42. 奔奔

    你好 ! 我在本地测试 可以下拉下载,弄到微信上面去了 就只能加载一次。

  43. wj_java

    你好。。。你的功能实现的很不错。。。但有一个体验上的问题 能改进的话是比较好的
    比如 手机上屏幕比较小可能显示的数据就几条 当滑动屏幕时就会触发事件进行数据的加载 就会出现屏幕不会滑动 。。如果加一个 滑动的位置判断那样是最好的。。。。当滑到屏幕底部才触发事件

  44. 未来

    您好,不知道您用过swiper没? 我在swiper的其中一个slide上添加插件,然后在其他的slide上往上拖动时,会触发加载更多方法。 不知道有没有办法解决?

    • 这个还真没一起用过。毕竟在某一个轮播里,还可以触发加载更多,怎么都觉得是个奇怪的需求呀

      • 未来

        我发现一个奇怪的问题,我给一个静态页面加入了dropload 然后在js里初始化后,每次加载页面时都会先走一次加载更多的方法。 是我哪里写的不对吗?

  45. 五月花

    有个问题没有考虑到 就是在手机端 如果手指向上用力滑动一下放手 列表会惯性上滑 然后手指再一点就停住了 关键在于 让他停住的这次点击 如果点到了新闻链接 就自动跳转链接了 这不是用户想要的 其实只是想让惯性上滑停止而已 却点进了链接

  46. 小坏

    你这个插件还是有兼容性的问题,我在iPhone5中使用,当数据全部通过这个插件加载时,数据完全显示不出来,只能向下滑动一次才能加载出来,不滑动,什么都没有,期待尽快解决,我只能暂时换成其他插件了。

    • 你好,你说的是你自己实际用出问题,还是我github上demo有问题?

      • 小坏

        是我实际应用中出现的问题,你github上的demo是提前没有通过这个插件就显示了几条列表信息,如果你所有的列表信息都是通过你这个插件的ajax来获取,那么在iphone5和安卓平台上处世进入这个页面时,就不会显示任何列表信息,必须要通过下拉或上拉刷新才能显示出列表信息,但是在iphone6的浏览器中却没有这个问题,所以应该是兼容性的问题。

        • 请问下你这个问题我也碰到了 怎么解决啊 是先自动根据配好的页码数和最大显示数到后台先获取出初始数据吗 然后再下拉加载?

  47. 可以给源代码吗 上拉加载和下拉刷新的 万分感谢

  48. 你好 请问下你的上拉加载的demo是每上拉加载一次就从后台服务器读取全部的数据吗 还是一次全部读完 然后在前端根据分页数和最大的list数组数来进行分别获取每一页的数据

    • 不好意思,最近比较忙,可以加文章底部的群沟通。

      • 我加了这个群了 只是现在项目紧 以前没做过手机端页面 现在上面催着要做 所以我只是想问下那个问题 然后根据具体情况具体解决的 那是每上拉加载一次就从后台服务器读取全部的数据吗 还是一次全部读完 然后在前端根据分页数和最大的list数组数来进行分别获取每一页的数据

  49. 在吗 大神 🙂

  50. 佳佳

    楼主,下拉滑动向下拖动,在不松手的情况下,在移动到开始位置,下拉刷新到字不会消失

  51. wandern

    大神 这个插件我测试了一下 如果是要一个页面中间的某个DIV使用这个下拉刷新的时候 当滚动条到最底部 然后再回到前面 刷新失效

  52. tianzun11

    谢谢!很好用

  53. gaogao

    我想要zepto和jq同时引用,可以支持嘛

  54. linxin

    上拉一点不松手往下来,屏幕抖动,这个问题能怎么处理呢?

  55. 宏的云

    西门,在手机版中我用的你的插件和swipe.js 插件冲突,这是一个幻灯片插件,应该很多人都有在用。两个同时存在的时候swipe能正常使用,dropload好像就无法加载,我将swipe.js移除,dropload恢复正常加载。

  56. HM

    列表页还含有筛选选项 如果我点击筛选项 把列表清空以后怎么重新加载第一页数据

  57. 1

    ajax加载数据后就很卡,拉的不流畅

  58. chun

    想问一下,我有多个tab切换,异步加载所需内容,点击切换滚动会使其他的tab项内容滚动,如何设置滚动刷新只刷新当前内容异步加载

  59. jin

    您好不知道为什么我的会报错: Uncaught TypeError: Cannot read property 'html' of undefined

  60. qq

    楼主你好,这个插件我测试了下,非常好用,可是怎样把这个插件跟懒加载结合在一起啊?

  61. wen

    tab选项卡,我想把菜单一和菜单二效果一样,比如说菜单二加载更多4条直到没数据为止了,怎么写?

  62. 试试

    手机端绑定二级域名之后加载失效

  63. coder刘

    请问如果加载的元素高度没给那么插件会正常加载吗?

  64. 出现无限加载时什么情况! 一直调某个函数

  65. 你在百度工作吗?在百度首页发现你的代码 不过没署名

  66. 页面在加载了很多以后会出现,不能下拉也不能上拉的情况

  67. 有坑:http://wp.iyouths.org/352.html

  68. 霍诚

    怎么重置整个函数

  69. 霍诚

    一个div里面需要多次回填数据,多次实现上拉加载下拉刷新,所以需要重新初始化整个函数,函数初始化,大神帮帮忙

  70. 小小

    下拉刷新大概多刷新几次就不能刷新了,帮看看

  71. 小象

    你好西门,我最近用了的 dropload 0.9.1(161205) ,出现一个问题,在第一次加载数据的我设置pageSize5,数据加载多次一直把数据库的数据加载完了,这个是什么原因造成的啊

  72. 小象

    你好西门,我最近用了的 dropload 0.9.1(161205) ,出现一个问题,在第一次加载数据的我设置pageSize5,数据加载多次一直把数据库的数据加载完了,这个是什么原因造成的, 这个问题我debug 的时候 在数据append到html后,调用me.resetload();方法,再次加载调用loadDownFn这样出现了死循环

  73. thinkwind

    博主好,请教个问题,为什么刚打开页面的时候,第一次不自动请求数据,显示上拉加载更多?

  74. 神雕侠

    ons不是一夜情的意思吗?西门?

  75. 神雕侠123

    ons不是一夜情的意思吗?西门????sdf

  76. 星火燎原

    我对页面的元素进行remove后,上拉就没有返应了,请问要怎么办呢

  77. 你好西门,我最近用了的 dropload 0.9.1(161205) ,出现一个问题,在有筛选条件下,点击筛选条件后,加载一部分数据后,下拉加载这个方法就不会触发了,这个问题怎么解决?

  78. 大神 有个项目需要在弹出框内加上拉加载,滚动区域为弹出框本身,但是我写完之后一直显示加载中,这是什么问题 有没有demo可以参考?

  79. 先膜拜下大神,插件还有待完善!凡事层带有position: absolute;属性,都会无限加载,导致CPU爆满!然后死机!

  80. 你好,使用你的下拉加载后,每次点击屏幕左上的返回需要3次, 这个可有方法解决.谢谢!

  81. AJAX 错误会一直死循环ALERT

  82. 张宝明

    请问下,为啥你的插件的ipone浏览器上我重置后不能滚动加载呢

  83. pavilion

    请问,用js写了方法点击按钮触发重新加载数据为什么在手机上没有效果

  84. fd

    nginx下报错

  85. fd

    No input file specified.

  86. ce

    初始化会不停的调用下拉方法,不停的刷,

  87. 阿狸王国

    你好 我下拉加载的时候 在本地一切正常,但是在请求后台数据后,那个加载的提示loading信息会一直处于中间 而不是在最底部 请问这是什么问题?

  88. 小狮子

    为什么我的会自动触发上拉加载啊?一直触发…..我的数据只有3页,结果一直加载到n页….然后我把scrollarea的window改成我的容器,又除了第一页再也无法触发上拉加载了

  89. cc

    刷新页面就无限执行ajax 怎么控制

星火燎原进行回复 取消回复

分类目录