去年国庆后，手上项目不多，研究了下手机浏览器里下拉刷新、上拉加载更多这种效果，当时效果是仿照微博客户端来弄的，写了个简单的demo就放在GitHub上没管他了。
一直到这个月，合作项目的开发同事做APP内嵌页，要我增强加载数据体验，跟APP效果一致，所以我就把这段代码拿过来用。用了才发现之前的代码有很多没考虑到的地方，改了一下，用在项目里，暂时还没测出什么bug，所以就放出来，大家如有需要，也可以使用一下。
当然，手机浏览器里的效果肯定没法跟APP原生的比，只能说有总比没有强。
GitHub地址：https://github.com/ximan/dropload，感兴趣的话不要吝啬Star。
所有信息都写在GitHub的readme里，因为那边更新代码比较方便，所以本文更新会比较慢。最近GitHub被攻击了，访问速度较慢。我也把代码上传一份到博客，预览会比较方便。本博客的代码不能保证是最新版，最新版肯定在GitHub上，切记。
在使用中有什么建议或者bug，请留言反馈，或者在GitHub上提Issues。
发现有挺多人需要这个插件的，不过都在使用中遇到一些问题，建了个QQ群，希望大家一起交流更方便：群号：290725368，点击加群
不错呀，谢谢分享！
试了，效果真不错！
有时候会有一些 闪屏效果，不知道你们遇到没
在下拉的时候，最底部会不停的弹
0.9.0(160215)这个版本在上拉加载完数据显示“暂无数据”后，再下拉刷新，底部依然是“暂无数据”
Github 已经好了~~
下拉刷新加载，当我加载完数据以后我怎么禁止他访问服务器
加载都是ajax吧，禁止访问服务器是什么意思？
下拉后其他js监听全失效了。。。 ➡
可否写个简单示例我看看？
➡ 已解决。。下拉还是很好用的。么么
是插件问题还是你代码问题？
➡ 代码问题。重复注册了监听
问题来了。。。下拉中间的内容有滚动条。。。怎么破。。一拉直接触发下拉事件了啊 😮
哈哈，这个我得考虑下，好复杂的需求啊
😛 rz
么么哒。。上拉的时候。。上拉的效果往屏幕外扩张。而不是把控件网上挤。这是为什么呀 😀 😀 😀
问题应该是由于滚动条没有自动下拉引起的。。滚动条下拉受什么样式影响么？
下面我加了个div，div的高度＝滑动的距离，所以视觉上看起来页面整体向上。
哪里加了div？
下面loading
滑动时候的产生的div这个我知道。。问题是这个div不往上跑。。往下跑。。所以看不到滑动效果
https://github.com/ximan/dropload/blob/gh-pages/dist/dropload.js#L141
第141，div加高度
第142，网页scroll滑动
😀 这个源码我看到了呢。。。就是因为这两个失效了。才导致下拉滚动条不能自动下拉
我发现只要拖动就获取，我只想最顶部和最底部拖动的时候才获取。
你好，请问是什么设备，什么浏览器？
好像是所有浏览器都会，还有就是IOS有时候不会拖拽，我没有线上的，有联系QQ吗，我发静态的给你看。
我的QQ306012576
好像只是上拉加载，不能下拉更新后来就不行了。上拉几次后就得下拉一次，再上拉就可以，不然就不行。
我也遇到这个问题，请问解决了吗
写的不错！ ❗ 但会有抖动情况！当像上拉的时候！拉住不放，轻轻启动的时候，抖动很厉害！测试手机5s，左手出现几率比较大！。。
楼主问下：可能上面我把问题没有说清楚。首先不刷新，我直接上拉加载数据，这样就不能加载数据，如果我开始下拉刷新后，再上拉加载是可以的，当我继续3次后，就不能继续加载，得需要下拉更新后，才能激活上拉加载。
你好，github里的例子也有这个问题吗？这个页面的例子比较旧
是的，我就是从你github里面下载的例子发觉这个问题的，还请你看下是为何。
为什么 加载时感觉页面发抖
因为手机浏览器即使没有滚动条，也可以上下拉。我写的拉动偶尔会触发浏览器那个拉动。
写的真不错
，请教楼主，当上拉之后一直不松手，保持释放加载的状态就抖动的很厉害，另外有时候释放加载会卡在那里不动，怎么解决呢？ 🙄
怎么下载呀
插件是不是没有提供下拉没有拉到数据，下方提示的样式？
这个还真没，你如果需要，在ajax里自己append吧
append出来的位置。。很梦幻啊
你好，我发现下拉到第12次后，这个js就会失效了加载不了东西，我只是一个静态页。
我这个例子也是静态页面，有这个问题吗？
您好 三星i317 有 a 标签不能点击 ，能滑动不能加载
有个问题,如果下拉刷新,第一次可以执行,不能执行第二次了,然后上拉也拉不动了.如果不执行下拉,上拉可以执行多次.
我也遇到这个问题了，作者有解决吗？
放到服务器上好像不行
看看浏览器报错信息
❓ 看了源码，下拉加载有bug吧，me._childrenHeight <= (me._loadHeight+me._scrollTop)
很容易就满足条件加载了。就算是你的demo 也出现向下滑一下就加载的情况
我用的我用的是坑爹的微信浏览器。
其实我也不明白为什么是这个条件。。。
👿 是我布局的问题。总算明白什么是这个条件了。
能解释下这是怎么回事吗
demo最外面的div是绝对定位的。还要height: 100%;，不然me._loadHeight就不会等于$(window).height();加载条件就会出现问题。还有也影响动画效果。用这种布置是为了做这个动画容易吧！没有深究 ❓
那这个demo布局要改吗 为什么加载一两次就不能再加载了
不是要改，是基本要按demo的布局来用。如果出错你看看是不是有和demo有不同的地方。
me._childrenHeight 这个随着每次的加载越来越大 后来就不满足<(me._loadHeight+me._scrollTop)的条件了
这个问题是我之前没考虑到，大部分人跟我的布局方式不一样，已经更新了，请去github查看
🙁 因为只是想用来做评论的下拉加载。这个插件不能用啊。为什么要把布局写死来得到窗口的高度？（:wink: 我搞后端，对css盒子没有研究不深如果说错见谅）
看了你插件代码一天受益匪浅。js果然好玩。
感谢关注，已经更新了你说的这个问题，你再试试 🙄
同样出现 按住不放出现抖动情况 🙁
你好~ 在微信全屏的时候不能滑动 最外层div是全屏fixd固定的 里面的div是有滚动条 向上滑动会出现该网页由XXX提供
在苹果手机上会出现这样的问题
请问，要怎么用js 主动去触发下拉刷新呢？
没写这个，因为我当时考虑是页面一加载，默认数据都展示到页面，不需要js去取数据
如果一个页面有几个分类，比如有ABC3个班级，页面默认加载显示A班级的所有学生，下拉加载都是A班的学生，这个时候点击一下B或C 怎么去加载相应的班级呢？
手机上，加载的时候，抖动很厉害。。尤其是下面有固定的菜单的时候，安卓4.4.2
用了artTemplatemo模板，这效果实现不了，有影响吗？
我没用过artTemplate，可否写个例子看看？一起研究下
我试过这个例子，是可以的
artTemplate
留个邮箱
直接回复本邮件即可
我也遇到同样的问题了，拉一次就不能再拉了，楼主能否给个邮箱帮忙看下代码？
直接回复本邮件即可 🙂
怎么发代码给你啊，这个不能加附件呀，代码帮忙瞄一眼，网上找了很多的控件，就属你这个最符合我的要求啦
😕 能帮忙再看一眼么？急啊！
😕 盼回复，直接发邮件给我，万分感谢！
楼主你好，我在使用你的插件时发现这么个问题，环境是iphone6，safari浏览器，
每次往上拉的时候，都需要拉2-3次才能触发事件，按我的判断可能第一次是100%触发了浏览器本身的滑动，第二次或第三次才触发div自己的滑动，不知道为什么会这样，求解。
还有就是往上拉的时候不放手，手指往下移一下，屏幕就会强烈抖动。
确实是需要2次，第1次是把整个网页拉到见底，第2次才会判断，然后执行loading。
另外你说的抖动，跟我这个js实现办法也有关系，实时计算网页的scroll值和loading的高度导致的。
博主好，我现在用这个插件遇到了一个问题，下拉不送会提示释放刷新，这个时候如果不松手向上拉动更大距离，这个时候下拉失效，再上拉是也失效；同样向上拉住不放，突然向下拉动更大距离，这时上拉失效，再下拉也会失效。这个问题可以解决的吗？
这个问题确实存在，因为这种情况很少见，所以一直没有处理，下次有时间更新处理。
为什么上拉没有效果》
❓ 我提供的demo也不行吗？什么手机？什么浏览器？
我用的是0.4.0(150927) 怎么下滑就刷新了 请问博主这是什么情况呀
请看我github里的demo，是否也存在此问题？如果有，请回复一下手机型号和浏览器，谢谢
chrome 都不行
更不用说手机型号了 （手机的话是安卓5.0.1）
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里，我试试，看是不是哪里没有配置对，或者布局问题。直接回复这封邮件即可。
为什么我用0.4.0还是会没有滑到下面就去加载数据了，看你demo都没问题。。。
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>这是我用的JQuery，想问下你0.3.0是什么原因导致的，我看看是不是我弄错了，谢谢
0.3.0必须用特殊的布局，例如demo product-list.html，用的是flexbox布局。后来发现很多人用的普通布局，我就更新0.4.0，根据window滚动来做判断，就有了news-list.html。jq1.x和2.x都试过，没问题。要不你把demo发我这个邮箱看看
http://yaohao-9.imwork.net/SchoolLife/hello/PartTimeListView 就是这个，你看下，麻烦了
第一下的时候很明显，没滑最下面，进度条就缩短了一大半
打不开这个网站 😕
好了，可以用了 😀
你这种布局，还是用“普通列表DEMO”里的吧，比较简单。
另外，麻烦用这个js不要改掉我的版权，谢谢。 😀
嗯，好的，但是要怎么解决呢？ 😛
1，把我flexbox布局代码删掉
2，按照“普通列表DEMO”js套一遍
多看看我的代码思路，这样会让你写代码更简单
flexbox的代码？我找不到，第二点也不知道怎么做？，对了顺便看下版权改过来了没有 ❗
找到flexbox 了我测试下哈
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
删掉这些么？怎么还是用 ➡ 为什么跟你的demo一样，我的却没用呢 😥
额，布局你按照自己的来做就行了，再引用我的js。还请多花点时间看看吧
我电脑关了,昨天等了好久结果你没看。10点下课后回去开。准备一天不关机 🙄
哈哈，本地的环境啊。
建议写个简单的demo，发我邮件，或者找我买个主机，这样就有网站啦
还在测试,所以没有部署上去（不过阿里云快过期了 ❓ ）。demo的话估计抽出来的时间有点长,还有数据什么的不好弄,我用的是j2ee
未滑动到底部就加载了，是什么情况，我下载的js是最新的，还是有这个问题
请使用第一个demo里的代码，有scrollArea参数
请问这个zepto.min.js要调用吗
jQuery或者Zepto都可以
有这个参数的，请问调用的时候只需要这个代码：$('.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群，文章末尾
加群，没反应呀，我这个数据不是在页面写死的，是从后台服务器拿的，所以在向服务器发送请求的时候，我用的是自己后台，这个和未滑到底部就加载了有影响吗
😥
代码中如果有其他js必须还要一并引入jquery.js或者jquery.min.js文件的话，这个上拉下拉效果就会冲突不起作用了，删除掉jquery.js可以正常，但其他js效果就没有了，这个要怎么解决呢？
那就只引用jQuery即可，不要引用Zepto
明白了，原来是这个原因，多谢博主指点
在ajax加载执行代码中，上拉刷新下拉加载数据列表后的内容里，含有点击执行某些js方法的话，这些操作也是没有效果，请教有什么方法解决吗？再有上拉加载的时候高度一直是保持在最初的高度，而不是像下拉刷新一样高度可以自动向下撑开，是什么原因呢？谢谢！
1，用委托，例如$().on('click','element',function(){})
2，估计是你布局有问题吧，看我第一个demo
有委托的案例吗？这块运用接触的较少
请问下拉会抖动解决了吗，看起来不是我一个人遇到了这个问题
楼主 本地上可以用 但为什么 在微信浏览器上面就完全没有效果了
// 判断滚动区域
if(me.opts.scrollArea == window){
me.$scrollArea = $win;
}else{
me.$scrollArea = me.opts.scrollArea;
}
大神，，问个问题，，项目里面的判断是对的吗 if(me.opts.scrollArea == window)这块。。。貌似永远不成立吧
demo1就是window呀
如果我理解的没错的话，me.opts.scrollArea是指向了me.$element = $(element)；这个元素吧，，如果传入的是window的话，不就相当于$(window)==window了么？
额，你理解错了，这里是想判断，滚动框的参照物，是参照window，还是参照绑定元素那个容器。看demo1和demo2就知道了。
明白了，技术赞！
❗ 😮 😯
我想问下，问什么在这个插件的网页里面再加入jquery1.3.min.js ,就报错了，整个jquery1.3都用不了了？怎么解决呢？
jQuery/Zepto任选其一，不要同时引用
我想要同时引用，有什么办法嘛？
可以再加一个状态属性，避免不断清空插入。。。
上拉加载 用me._childrenHeight <= (me._meHeight+me._scrollTop)判断？
你好，已经更新到0.6.0，看是否还有问题。
你好 ！ 我在本地测试 可以下拉下载，弄到微信上面去了 就只能加载一次。
这个是ajax问题还是什么问题？还需要你慢慢排查一下
你好。。。你的功能实现的很不错。。。但有一个体验上的问题 能改进的话是比较好的
比如 手机上屏幕比较小可能显示的数据就几条 当滑动屏幕时就会触发事件进行数据的加载 就会出现屏幕不会滑动 。。如果加一个 滑动的位置判断那样是最好的。。。。当滑到屏幕底部才触发事件
你的意思是，一开始数据很少，无法占满一屏，导致没法滑动，自然也无法再加载。是这个意思吗？
对。。。
在下滑或是 上滑 事件时要判断下 如果不这样的话 体验要滑两次才滑动
您好，不知道您用过swiper没？ 我在swiper的其中一个slide上添加插件，然后在其他的slide上往上拖动时，会触发加载更多方法。 不知道有没有办法解决？
这个还真没一起用过。毕竟在某一个轮播里，还可以触发加载更多，怎么都觉得是个奇怪的需求呀
我发现一个奇怪的问题，我给一个静态页面加入了dropload 然后在js里初始化后，每次加载页面时都会先走一次加载更多的方法。 是我哪里写的不对吗？
0.7.0故意加的，如果网页数据过少没有滚动条，默认加载一次loadDown方法
有个问题没有考虑到 就是在手机端 如果手指向上用力滑动一下放手 列表会惯性上滑 然后手指再一点就停住了 关键在于 让他停住的这次点击 如果点到了新闻链接 就自动跳转链接了 这不是用户想要的 其实只是想让惯性上滑停止而已 却点进了链接
你这个问题，不是我插件的问题，而是浏览器问题吧
还真不是浏览器问题 具体你可以在手机里试一下
可以加群具体讨论一下，文章下面。
你这个插件还是有兼容性的问题，我在iPhone5中使用，当数据全部通过这个插件加载时，数据完全显示不出来，只能向下滑动一次才能加载出来，不滑动，什么都没有，期待尽快解决，我只能暂时换成其他插件了。
你好，你说的是你自己实际用出问题，还是我github上demo有问题？
是我实际应用中出现的问题，你github上的demo是提前没有通过这个插件就显示了几条列表信息，如果你所有的列表信息都是通过你这个插件的ajax来获取，那么在iphone5和安卓平台上处世进入这个页面时，就不会显示任何列表信息，必须要通过下拉或上拉刷新才能显示出列表信息，但是在iphone6的浏览器中却没有这个问题，所以应该是兼容性的问题。
请问下你这个问题我也碰到了 怎么解决啊 是先自动根据配好的页码数和最大显示数到后台先获取出初始数据吗 然后再下拉加载？
可以给源代码吗 上拉加载和下拉刷新的 万分感谢
文章里有提到GitHub地址：https://github.com/ximan/dropload
你好 请问下你的上拉加载的demo是每上拉加载一次就从后台服务器读取全部的数据吗 还是一次全部读完 然后在前端根据分页数和最大的list数组数来进行分别获取每一页的数据
不好意思，最近比较忙，可以加文章底部的群沟通。
QQ群吗
我加了这个群了 只是现在项目紧 以前没做过手机端页面 现在上面催着要做 所以我只是想问下那个问题 然后根据具体情况具体解决的 那是每上拉加载一次就从后台服务器读取全部的数据吗 还是一次全部读完 然后在前端根据分页数和最大的list数组数来进行分别获取每一页的数据
在吗 大神
在吗 大神 🙂
楼主，下拉滑动向下拖动，在不松手的情况下，在移动到开始位置，下拉刷新到字不会消失
大神 这个插件我测试了一下 如果是要一个页面中间的某个DIV使用这个下拉刷新的时候 当滚动条到最底部 然后再回到前面 刷新失效
意思是滚动到最底部 再回到前面 刷新下拉的事件监听不到了
仔细看看demo3，也是一个div里滑动
谢谢!很好用
我想要zepto和jq同时引用，可以支持嘛
上拉一点不松手往下来，屏幕抖动，这个问题能怎么处理呢？
西门，在手机版中我用的你的插件和swipe.js 插件冲突，这是一个幻灯片插件，应该很多人都有在用。两个同时存在的时候swipe能正常使用，dropload好像就无法加载，我将swipe.js移除，dropload恢复正常加载。
swipe.js我还真没用过，有可能是touch冲突了吧
列表页还含有筛选选项 如果我点击筛选项 把列表清空以后怎么重新加载第一页数据
resetload()试试
ajax加载数据后就很卡，拉的不流畅
想问一下，我有多个tab切换，异步加载所需内容，点击切换滚动会使其他的tab项内容滚动，如何设置滚动刷新只刷新当前内容异步加载
您好不知道为什么我的会报错： Uncaught TypeError: Cannot read property 'html' of undefined
楼主你好，这个插件我测试了下，非常好用，可是怎样把这个插件跟懒加载结合在一起啊？
tab选项卡，我想把菜单一和菜单二效果一样，比如说菜单二加载更多4条直到没数据为止了，怎么写？
手机端绑定二级域名之后加载失效
请问如果加载的元素高度没给那么插件会正常加载吗？
出现无限加载时什么情况！ 一直调某个函数
你在百度工作吗？在百度首页发现你的代码 不过没署名
页面在加载了很多以后会出现，不能下拉也不能上拉的情况
在线等
有坑：http://wp.iyouths.org/352.html
怎么重置整个函数
一个div里面需要多次回填数据，多次实现上拉加载下拉刷新，所以需要重新初始化整个函数，函数初始化，大神帮帮忙
下拉刷新大概多刷新几次就不能刷新了，帮看看
这个bug太明显了
你好西门，我最近用了的 dropload 0.9.1(161205) ，出现一个问题，在第一次加载数据的我设置pageSize5,数据加载多次一直把数据库的数据加载完了，这个是什么原因造成的啊
你好西门，我最近用了的 dropload 0.9.1(161205) ，出现一个问题，在第一次加载数据的我设置pageSize5,数据加载多次一直把数据库的数据加载完了，这个是什么原因造成的, 这个问题我debug 的时候 在数据append到html后，调用me.resetload();方法，再次加载调用loadDownFn这样出现了死循环
博主好，请教个问题，为什么刚打开页面的时候，第一次不自动请求数据，显示上拉加载更多？
ons不是一夜情的意思吗？西门？
ons不是一夜情的意思吗？西门？？？？sdf
我对页面的元素进行remove后，上拉就没有返应了，请问要怎么办呢
你好西门，我最近用了的 dropload 0.9.1(161205) ，出现一个问题，在有筛选条件下，点击筛选条件后，加载一部分数据后，下拉加载这个方法就不会触发了，这个问题怎么解决？
大神 有个项目需要在弹出框内加上拉加载，滚动区域为弹出框本身，但是我写完之后一直显示加载中，这是什么问题 有没有demo可以参考？
先膜拜下大神，插件还有待完善！凡事层带有position: absolute;属性，都会无限加载，导致CPU爆满！然后死机！
你好,使用你的下拉加载后,每次点击屏幕左上的返回需要3次, 这个可有方法解决.谢谢!
AJAX 错误会一直死循环ALERT
请问下，为啥你的插件的ipone浏览器上我重置后不能滚动加载呢
请问，用js写了方法点击按钮触发重新加载数据为什么在手机上没有效果
nginx下报错
No input file specified.
初始化会不停的调用下拉方法，不停的刷，
你好 我下拉加载的时候 在本地一切正常，但是在请求后台数据后，那个加载的提示loading信息会一直处于中间 而不是在最底部 请问这是什么问题？
为什么我的会自动触发上拉加载啊?一直触发…..我的数据只有3页,结果一直加载到n页….然后我把scrollarea的window改成我的容器,又除了第一页再也无法触发上拉加载了
刷新页面就无限执行ajax 怎么控制