欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

关于dropload.js使用方法

程序员文章站 2022-05-04 17:09:00
...
第一步,下载dropload插件,dropload插件下载地址 官方文档:https://github.com/ximan/dropload
第二步,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引入 Jquery1.7 以上 或者 Zepto 二选一,不要同时都引用,因为dropload是基于jquery实现的
第三步,将以下代码放到页面的最底部,注意是最底部,否则dropload插件获取不了高度
**基本代码结构**//#content为某个p的id  var dropload = $('#content').dropload({   
//scrollArea很关键,要不然加载更多不起作用  scrollArea : window,  
domUp : {  
    domClass   : 'dropload-up',  
    domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',  
    domUpdate  : '<p class="dropload-update">↑释放更新</p>',  
    domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'  },  
domDown : {  
    domClass   : 'dropload-down',  
    domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',  
    domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',  
    domNoData  : '<p class="dropload-noData">暂无数据</p>'  
   },  
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 : '<p class="dropload-refresh">↓下拉刷新-自定义内容</p>',
            domUpdate  : '<p class="dropload-update">↑释放更新-自定义内容</p>',
            domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>',
            domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>',
            domNoData  : '<p class="dropload-noData">暂无数据-自定义内容</p>'
        },
        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 : '<p class="dropload-refresh">↓下拉刷新</p>',
            domUpdate  : '<p class="dropload-update">↑释放更新</p>',
            domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',
            domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',
            domNoData  : '<p class="dropload-noData">暂无数据</p>'
        },
        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();
                }
            });
        }
    });
});

以上就是关于dropload.js使用方法 的详细内容,更多请关注其它相关文章!