ximan / dropload

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

dropload

a javascript implementation of pull to refresh and up to loadmore
移动端下拉刷新、上拉加载更多插件

背景介绍 (introduce)

感谢交流群和github上的网友反馈和建议，修复两个bug。并且把某些demo里ajax获取数据部分从原来的假json改为真正的数据接口，让例子更接近线上开发环境。

历史背景介绍

最新版本 (The latest version)

0.9.1(161205)

• 修复不调用loadDownFn报错bug
• 修复窗口改变resize未触发加载数据bug

所有更新日志

示例 (demo)

DEMO1，加载底部(loadmore)

DEMO2，加载顶部、底部(refresh & loadmore)

DEMO3，特殊布局，加载顶部、底部(refresh & loadmore with fixed navbar)

DEMO4，按需加载

DEMO5，tab加载数据

依赖 (dependence)

Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）
Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）

使用方法 (usage)

引用css和js
(basic)

<link rel="stylesheet" href="../dist/dropload.css">
<script src="../dist/dropload.min.js"></script>

$('.element').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                // 每次数据加载完，必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错，也得重置
                me.resetload();
            }
        });
    }
});

（注明：所有示例里ajax和setTimeout都是为了模拟加载效果而写的，与本插件无直接关系。ajax建议自己写，无特殊情况不必copy我的ajax写法，因为写得太烂。如需下载本地运行，请在本机装服务器环境，否则ajax会报错。）

参数列表 (options)

参数	说明	默认值	可填值
scrollArea	滑动区域	绑定元素自身	window
domUp	上方DOM	{ domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', domUpdate : '<div class="dropload-update">↑释放更新</div>', domLoad : '<div class="dropload-load">○加载中...</div>' }	数组
domDown	下方DOM	{ domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', domLoad : '<div class="dropload-load">○加载中...</div>', domNoData : '<div class="dropload-noData">暂无数据</div>' }	数组
autoLoad	自动加载	true	true和false
distance	拉动距离	50	数字
threshold	提前加载距离	加载区高度2/3	正整数
loadUpFn	上方function	空	function(me){ //你的代码 me.resetload(); }
loadDownFn	下方function	空	function(me){ //你的代码 me.resetload(); }

API

暴露一些功能，可以让dropload更灵活的使用

lock() 锁定dropload

参数	说明
lock()	智能锁定，锁定上一次加载的方向
lock('up')	锁定上方
lock('down')	锁定下方

unlock() 解锁dropload

noData() 无数据

参数	说明
noData()	无数据
noData(true)	无数据
noData(false)	有数据

resetload() 重置。每次数据加载完，必须重置

已知问题

• 由于部分Android中UC和QQ浏览器头部有地址栏，并且一开始滑动页面隐藏地址栏时，无法触发scroll和resize，所以会导致部分情况无法使用。解决方案1：增加distance距离，例如DEMO2中distance:50；解决方案2：加meta使之全屏显示

<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">

例如DEMO1

dropload使用交流群

群号：290725368，点击加群

dropload's Issues

怎么设置上拉才加载？

请问怎么设置上拉才加载，禁止滑动底部自动加载？

刷新加载新数据后，点击item打开新页面，再返回Goback后没有缓存刚才加载的数据？

第一步：下滑加载更多数据，此时列表中能正常显示新数据；
第二步：点击item打开跳转打开新页面；
第三步：点击返回键，调用goBack()方法，返回刚才的界面；
此时，刚才下滑加载的数据没有了。
请问如何才能保存刚才的新数据？
Android WebView已打开缓存

// 启动缓存
wv.getSettings().setAppCacheEnabled(true);
//设置 缓存模式
 wv.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);

关于滚动条到底的时候就加载的疑问

我有一个列表，当滚动到底部的时候就触发上拉的函数了，可是我只是想滚动到页底，能不能是：我滚动到页底后，在往上拉的时候再触发上拉的函数，我看demo里面的都是滚动到页底就开始触发了。

随意连续下拉几次后，无法继续下拉。

连续下拉（不等上一次下拉结束，一直下拉），几次之后，顶部就会无法进行下拉了，这个问题在pc，android和ios上用demo必现。

当我结合左划删除的时候 ，拖到底部不能自动加载了

我的需求是上拉加载下拉刷新，滑动删除，当我执行删除的时候，不能够在去加载下面的数据。有什么好的解决方法？

初始化查询不到数据，一直处于加载中怎么解决

tab加载多个数据

tab加载两个列表，ajax在success时，输出data.list.length，若一个列表请求的json为空，来回切换时在有数据的那个列表上没有了输出

滑动两次才能看到新数据

上拉刷新的问题：向上滑动两次才能看到新的数据。滑动一次的时候，已经调用dropload方法，但是页面显示的内容没有变化。

0.9.0(160215)这个版本好象有BUG

上拉下拉同时加载的案例有这样的问题：先上拉加载完数据显示“暂无数据”后，再下拉刷新，这时下面依然是“暂无数据”，没办法再上拉加载了

固定布局可以不断下拉上拉

而不是像普通列表一样 到一个下拉结束前不能再次下拉 而且上拉多次后 会出现无法拉出的情况

firefox自动加载的bug

第一次进来的时候，一直拉到底部到没有数据加载。再在最底部cmd+r刷新浏览器就会有自动加载。。。。firefox下

只调用下拉刷新时第一次顶部提示好用，之后下拉没有提示了

设置了resetload ，只调用下拉刷新，出现顶部提示信息显示问题，只有第一次显示，之后下拉没有提示了
备注：用的是jq1.11.1

无法使用seajs加载

无法使用seajs加载
代码里加上
define(function(require,exports,module){

dropload代码

})
也不能用

2016.2.2 问题已解决

将使用dropload的html5页面放在android的webview中，不会触发loadDown事件

`
function fnAutoLoad(me){
if(me.opts.autoLoad){
//放在webview中，发现me._scrollWindowHeight的高度是0
if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
loadDown(me);
}
}

}
`
应该是ln77行中赋值的时候问题，请问一下为什么写这里有坑呢？是指什么坑？
// 获取win显示区高度 —— 这里有坑
me._scrollWindowHeight = doc.documentElement.clientHeight;

click的时候出发 下拉会有两个加载中....

click的时候触发 下拉会有两个加载中....。再点击就会有3个，4个，5个怎么办？

后台是java for循环遍历json时length undefined

$.ajax({
type: 'GET',
url: $("#couponList").action,
data: {"gtype":"json","pageNo":pageNo},
success: function(data){
var pageCount = data.pageCount;
var result = '';
if(pageNo>pageCount){
poptipsShow("没有更多了！");
}else{
for(i=0;i<data.frMemCoupons.length();i++){

就是这个data.frMemCoupons.length undefined

更新到最新版发现默认会加载前两页的数据

当页面刷新的时候会默认加载前两页的数据，不知道是自己代码的问题还是本来就是这样的？在之前0.7版本的没有该问题，更新到0.9之后发现的。

下拉刷新后，上拉加载更多不能用了

使用chrome浏览器，下拉刷新后，上拉加载更多不能用了。

每次都是自动加载完就切换条件，但是第二次切换条件上拉就会把上一次的数据请求过来

插件如果对某一容器多次执行dropload函数时，会一直增加比如刷新、加载中、没有数据的dom节点

这个应该做下处理，如果有了那个dom节点，就不继续增加dom元素了吧

当只使用下拉刷新的时候会报错

用户可能会只使用上拉刷新或者只使用下拉加载，这个时候就会报错，需要在代码里面加判断

判断上拉和下拉逻辑有些小问题

发现一个问题，假设从上至下一共有A B C三点，我从B点开始下拉至C，并且能满足出现下拉刷新的updom，此时从C点快速（也许不需要快速）返回到A点，按照逻辑此时获得的手势方向是上拉，resultDom结果是downdom，当然是空，然后执行downdom.css，就回报空指针错误。看一下。
简单的方法是在fnTransition方法执行时判断下dom是否存在。dom && dom.css({...})

iOS中，上拉加载会一直抖动

无论是在 Safari，微信，还是webview里面，上拉动作未完成之前，会一直抖动

向下加载最多加载多少呢？

亲爱的童鞋们，我想请教一下，向下加载数据是写在json里面的，可是为什么一直滑动加载，到大约15次的时候就不加载了呢？这个加载多少怎么控制？如果数据非常多呢？求解

Maximum call stack size exceeded

看下你写的，容易造成这种致命的内存泄露。

tab切换时加载

常见应用场景在tab切换过程中，每次都需要重新获取数据，目前demo里面的tab切换加载数据，不能实现每次都重新加载数据

distance 问题

distance 拉动距离设50的时候，超过50的拉动都可以，但是拉动距离过长，碰到底部固定模块出现bug 刷新提示不消失，刷新不能进行，distance 可以再控制范围吗，拉动距离能否加上限？ps:出现在iphone6 上，华为没有这个bug，其他手机没试， 感觉是iphone6上滑到底部固定模块的时候，系统处理认为只有下拉没有松开的动作

第60行 me.$domDown = $('.'+me.opts.domDown.domClass);

感觉应该写成
me.$domDown = me.$element.find('.'+me.opts.domDown.domClass);

为什么不会自动加载？需要手动地拉一下滚动条才会自动加载

固定布局

当上拉到web之外 比如ios的顶部 就会卡住 普通列表却没有这个问题

为什么我用dropload加载数据的时候，到最后一页，在下拉，总是能够加载最后一页的数据出来？

关于下拉上拉刷新与正常滑动的bug

试了下，发现在正常的列表页面中滑动也会造成“下拉刷新/下拉加载”的问题，还没有看源码，好像没有判断是否在底部/顶部？

请问如何较好地重置容器呢？

比方说，我列表上方有个筛选按钮，点击以后，ajax请求会增加一个参数，这个参数会过滤掉一些项.
这样的话，我就需要把列表清空，然后重新加载（我设置了auto自动）。
我目前的做法是单击某个筛选选项以后，触发一个js函数调用，函数里直接把容器内容清空，
然后重新调用dropload(),但总感觉这样做不太完美啊。

慢慢上拉到一定程度

放开 就卡着不动了

click的时候出发 下拉会有两个加载中....

click的时候触发 下拉会有两个加载中....。再点击就会有3个，4个，5个怎么办？

绑定在固定高度div中overflow: auto;数据会一直加载

为什么在安卓下，上拉时，底部的状态条会一直跳动

底部状态栏为fixed布局，bottom:0，left right ：0,。
当上拉时，状态栏会一直往上跳动。
ios没有安卓的明显

下拉刷新，增加nodata情况

下拉刷新，能不能增加一个nodata 的情况

下拉刷新回弹不够顺畅

下拉到够长松开时，页面不会立刻回弹，而是刷新快完了的时候才慢慢的回弹

拖动的时候会导致列表抖动

我发现上拉的时候会导致列表上下抖动，好像是因为
touchmove的时候这句
me._curY = e.touches[0].pageY;
因为每次拉的时候位置会因为页面上移而跟着变动导致数值一上一下的，这个bug有办法解决吗

手机屏幕，将列表滑到最底部（向上滑），然后用手指下滑动，触发了下拉刷新！！！！，我是想滑到列表顶部的

怎么解决？

跟zepto的touch.js有冲突

一滑动就会警告：
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
低端机上就会很卡

现在暂时去掉了touchjs，看用其他的可以不

move时会不断清空、增加dom，有可能影响性能，下同

关于这个问题是否考虑过通过开关的方式来节约性能呢

在require.js同时引入了zepto.js和jquery.js,导致后面出现了有时候无法使用插件

由于项目需要用到了require.js，并且同时引用了zepto.js和jquery.js，有时候可以下拉刷新，有时候出现bug:TypeError: $(...).dropload is not a function

快速滑动时，会出现报错

快速页面上滑动的时候，会出现js报错，导致接下来再刷新就无法操作。

报错如下：

dropload.js:214 Uncaught TypeError: Cannot read property 'on' of undefined

环境：

• chrome 46
• dropload 4.0

滚动之后触发元素的点击事件

我给滚动的列表元素绑定了点击事件，但是当滚动了之后都会触发到元素的绑定事件，我希望能够在滚动的时候禁止触发点击事件，但是在不滚动的时候点击能够触发事件的，劳烦有空告知怎么解决呢？说说思路也好，感谢！

上拉刷新bug

http://ximan.github.io/dropload/examples/load-top-bottom.html#3

当火狐浏览器缩放到30%，360×640宽度，上啦刷新之后不能加载更多。
在生产环境用遇到这样的问题，一页加载10条，但是没有把页面铺满，就不会加载更多。
但是刷新url地址会自动加载更多.
上面的官网的url demo也有这样的问题

按需加载

按需加载如果input框输入变化太快，数据数量会错乱

移动端微信中，无论是上拉还是下拉，没到底部或顶部都会立即触发事件。

怎样不一次性加载所有数据

现在是一次性全部加载出来，万一有几万条数据，一开始的加载时间有点长，请问怎么分步骤加载进来。