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

所属分类:UI-滚动,加载

 201690  334  查看评论 (110)
移动端下拉刷新、上拉加载更多 Zepto/jQuery插件 ie兼容10

依赖 (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自动加载truetrue和false
distance拉动距离50数字
threshold提前加载距离加载区高度2/3正整数
loadUpFn上方functionfunction(me){
//你的代码
me.resetload();
}
loadDownFn下方functionfunction(me){
//你的代码
me.resetload();
}

API

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

lock() 锁定dropload

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

unlock() 解锁dropload

noData() 无数据

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

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

dropReload() 手动加载

已知问题

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

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


相关插件-滚动,加载

jQuery文字滚动显示

一个简单的jQuery文字滚动效果插件myslideup.js
  滚动
 14073  61

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 14477  156

类似fullPage的全屏滚动插件

这是一款类似fullPage的全屏滚动插件,使用很简单
  滚动
 19464  96

js美化div滚动条并兼容IE8

js美化div滚动条并兼容IE8
  滚动
 21553  159

讨论这个项目(110)回答他人问题或分享插件使用方法奖励jQ币

    暗裔剑魔 0
    2017/12/3 20:26:42

    另外一个tab加载不出数据怎么回事

    回复
    blackkei 0
    2017/11/18 1:22:34

    ios版微信内置浏览器上拉没法加载,求告知解决办法??????

    回复
    -FaIr 0
    2017/11/9 16:34:09

    已经解决了...

        阿哲10
        2017/11/13 16:18:08

        你怎么解决的?

    回复
    -FaIr 0
    2017/11/9 16:02:06
    有个非常严重的问题!!!当下拉刷新的json数据为2条时(就是数据没有占领一个屏幕),触发下拉刷新时,无法执行上拉加载效果????
        阿哲10
        2017/11/13 16:26:30

        ?你这个是怎么解决的呢

    回复
    pzf329958 0
    2017/11/3 10:25:00

    怎么设置为触底刷新 而不是没到底就刷新了

    回复
    随心所遇i 0
    2017/11/1 14:42:32

    你的那个tab 插件,下拉的时候不能动态从后台获取数据,而是第一次就加载完全部数据,然后在分布显示,我要的是下拉的时候从后台动态获取数据,在显示

    回复
    /shui鸿图设计/shui 0
    2017/9/28 15:08:20

    我是看这个解决的问题:

    http://www.cnblogs.com/LChenglong/p/6781956.html

    作者的案例比较操蛋,全是全部调用后在分页的。我要的没有,自己改动后能实现了但是只要下拉就加载,不到底部就加载。仿照上边的案例做了后发现和我自己改的有点不一样但是改动后全部想要的功能实现了。看这么多问的,我就想给大家一个提示吧。可以参考下看看。正规说作者的插件挺不错的,案例写的无语。。。

        暗裔剑魔0
        2017/12/11 13:04:02

        这个数据是全部调用在分页的,怎么改呢

    回复
       Pain 0
    2017/9/14 0:33:30

    为什么会一直加载呢?我没有做任何操作

        qzuser0
        2017/10/10 10:47:35

        您好,您的问题解决了没,我现在也是遇到这种问题,用作者的分页来做的话没问题,但是用我们自己的分页会出现这种无限加载的问题.这个和后台有关?

        Believe me or roll.0
        2017/11/3 10:55:49
        我也遇到这种问题 怎么解决的呢
    回复
    .睡觉时候喜欢打嗝 0
    2017/9/8 11:42:50

    调用插件成功数据上拉下拉都正常。加了一个搜索功能后,点击搜索再次调用插件下拉的时候顶部出现多次,下拉刷新,样式,求朋友解决一下

        々伴?白首0
        2017/9/12 16:33:15

        你们的搜索怎么写的,我写的搜索,有一点问题,每次搜索,url发生变化时,都会刷新,一刷新,就会运行插件,搜索功能,就停止了,你们怎么解决的

    回复
    Smile?? 娴° 0
    2017/9/7 16:48:34

    需要加个搜索,怎么才能确保一个页面不会同时出现多个正在加载?谢谢

        々伴?白首0
        2017/9/12 16:34:42

        你们的搜索怎么写的,我写的搜索,有一点问题,每次搜索,url发生变化时,都会刷新,一刷新,就会运行插件,搜索功能,就停止了,你们怎么解决的,ajax把搜索条件传到后台,url肯定发生变化。有办法,解决这个问题吗?

        幻葬0
        2017/9/20 15:31:25

        你好,你的问题解决了吗?怎么解决的?我也是这样的问题

        那焉0
        2017/10/18 10:19:31
        我也遇到这个问题 每次点击搜索   收起键盘的时候  事件有触发一次
    回复
取消回复