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

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

 179803  307  查看评论 (100)
移动端下拉刷新、上拉加载更多 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">


相关插件-滚动,加载

Parallux响应式网页滚动视觉差特效

jQuery Parallux是一款可制作响应式网页滚动视觉差特效的jQuery插件。通过该插件可以制作背景图像,图像,视频,文本等HTML元素的滚动视觉差效果。
  滚动
 12282  72

常用的根据高度自动切换效果

常用的根据高度自动切换效果 简单 下载下来之后可以直接是用 兼容性好 不存在兼容问题
  滚动
 7761  49

全屏滚动时差切换效果(兼容IE7及以上版本)

全屏滚动代码简单,非常适合新手。
  滚动
 12658  87

jQuery无限滚动新闻插件tickerNews

tickerNews 是一个轻量级但有很强大的 jQuery 新闻滚动插件,你可以使用它让一个新闻列表进行无限的滚动。
  滚动
 5305  23

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

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

    我是看这个解决的问题:

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

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

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

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

        qzuser0
        2017/10/10 10:47:35

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

    回复
    .睡觉时候喜欢打嗝 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
        我也遇到这个问题 每次点击搜索   收起键盘的时候  事件有触发一次
    回复
    朋朋 0
    2017/9/1 10:52:47

    感谢分享,现在正需要。

    回复
    木浔灬 0
    2017/8/21 11:38:49
    $('.dropload-down').html("");
    dropload.unlock();
    dropload.noData(false);
    dropload.resetload();

    是这样不兼容,在其它浏览器正常,就是在手机UC不兼容,重置不了

    回复
    呆萌的神经系统 0
    2017/8/11 20:46:03

    为什么我的domdown  底部提示的上拉加载的样式出不来

    回复
    大头兵的小白菜 0
    2017/8/5 21:13:30

    测试数据的每个字段名是不是都有讲究?“link”字段是干嘛的呢?自己加的字段名死活接收不到,唉

    回复
    大头兵的小白菜 0
    2017/8/5 20:57:54

    想实现点击某条数据会跳转到详情页面的功能,请问该怎么给每条数据添加对应的url(url是从后台获取的)?我给测试数据里添加url字段,却获取不到,求指点。

    回复
    No Surrender。 0
    2017/7/28 14:53:00

    太牛了,  写的东西改都改不掉,  666

        HJ0
        2017/10/13 14:15:47
        html结构都要跟他一样的
    回复
取消回复