下拉刷新，上拉加载插件dropload.js使用总结

最新推荐文章于 2024-07-12 08:49:54 发布

alokka

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量6.8k

点赞数

分类专栏： JS 插件

本文链接：https://blog.csdn.net/alokka/article/details/78292634

版权

JS 插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一步，下载dropload插件，dropload插件下载地址官方文档：https://github.com/ximan/dropload
第二步，将下载好的dropload插件中的dropload.css，dropload.min.js文件引入到页面中，注意还要引入 Jquery1.7 以上或者 Zepto 二选一，不要同时都引用，因为dropload是基于jquery实现的
第三步，将以下代码放到页面的最底部，注意是最底部，否则dropload插件获取不了高度

**基本代码结构**
//#content为某个div的id  
var dropload = $('#content').dropload({   
//scrollArea很关键，要不然加载更多不起作用  
scrollArea : window,  
domUp : {  
    domClass   : 'dropload-up',  
    domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',  
    domUpdate  : '<div class="dropload-update">↑释放更新</div>',  
    domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'  
},  
domDown : {  
    domClass   : 'dropload-down',  
    domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',  
    domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',  
    domNoData  : '<div class="dropload-noData">暂无数据</div>'  
   },  
loadUpFn : function(me){  
        //下拉刷新需要调用的函数  
        alert("下拉刷新需要调用的函数");  
        //重置下拉刷新  
        me.resetload();      
},  
loadDownFn : function(me){  
        //上拉加载更多需要调用的函数  
        alert("上拉加载更多需要调用的函数");  
        //定时器函数,为了看出上拉加载更多效果  
            setTimeout(function(){  
                // 每次数据加载完，必须重置  
                    me.resetload();  
                },1000);  
           }  
});

一些完整的例子按需查看就好

示例一、加载底部

<script>
$(function(){
    // 页数
    var page = 0;
    // 每页展示5个
    var size = 5;

    // dropload调用
    $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'GET',
                url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,//配合后台接口
                dataType: 'json',
                success: function(data){
                    var arrLen = data.length;
                    if(arrLen > 0){
                        for(var i=0; i<arrLen; i++){
                            result +=   '<a class="item opacity" href="'+data[i].link+'">'
                                            +'<img src="'+data[i].pic+'" alt="">'
                                            +'<h3>'+data[i].title+'</h3>'
                                            +'<span class="date">'+data[i].date+'</span>'
                                        +'</a>';
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});
</script>

示例二、加载顶部、底部

<script>
$(function(){
    // 页数
    var page = 0;
    // 每页展示10个
    var size = 10;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据-自定义内容</div>'
        },
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/update.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 0;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'GET',
                url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                dataType: 'json',
                success: function(data){
                    var arrLen = data.length;
                    if(arrLen > 0){
                        for(var i=0; i<arrLen; i++){
                            result +=   '<a class="item opacity" href="'+data[i].link+'">'
                                            +'<img src="'+data[i].pic+'" alt="">'
                                            +'<h3>'+data[i].title+'</h3>'
                                            +'<span class="date">'+data[i].date+'</span>'
                                        +'</a>';
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });
});
</script>

示例三、多次加载

$(function(){
        //利用此写法，可以限制多次加载的个数。
    var timer;
    
    $('.header .ipt').on('input',function(){
        var _length = $(this).val();
        // 如果输入值不是数字或者是空，就跳出
        if(isNaN(_length) || _length === ''){
            return false;
        }
        clearTimeout(timer);
        timer = setTimeout(function(){//也可不用定时器
            // 清空内容
            $('.lists').html('');
            $('.dropload-down').remove();

            var counter = 0;
            // 每页展示4个
            var num = 4;
            var pageStart = 0,pageEnd = 0;
            // dropload
            $('.content').dropload({
                scrollArea : window,
                loadDownFn : function(me){
                    $.ajax({
                        type: 'GET',
                        url: 'json/more.json',
                        dataType: 'json',
                        success: function(data){
                            var result = '';
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;

                            for(var i = pageStart; i < pageEnd; i++){
                                result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                                +'<img src="'+data.lists[i].pic+'" alt="">'
                                                +'<h3>'+data.lists[i].title+'</h3>'
                                                +'<span class="date">'+data.lists[i].date+'</span>'
                                            +'</a>';
                                if((i + 1) >= _length || (i + 1) >= data.lists.length){
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $('.lists').append(result);
                                // 每次数据加载完，必须重置
                                me.resetload();
                            },1000);
                        },
                        error: function(xhr, type){
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        },500);
    });

示例四、固定布局，加载顶部、底部

$(function(){
    // 按钮操作
    $('.header .btn').on('click',function(){
        var $this = $(this);
        if(!!$this.hasClass('lock')){
            $this.attr('class','btn unlock');
            $this.text('解锁');
            // 锁定
            dropload.lock();
            $('.dropload-down').hide();
        }else{
            $this.attr('class','btn lock');
            $this.text('锁定');
            // 解锁
            dropload.unlock();
            $('.dropload-down').show();
        }
    });

    // dropload
    var dropload = $('.inner').dropload({
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据</div>'
        },
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/update.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        },
        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/more.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').append(result);
                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        }
    });
});