首页 >web前端 >js教程 >关于dropload.js使用方法

关于dropload.js使用方法

一个新手原创: 2017-10-20 11:15:1016618浏览

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

**基本代码结构**//#content为某个p的id  var dropload = $(&#39;#content&#39;).dropload({   
//scrollArea很关键，要不然加载更多不起作用  scrollArea : window,  
domUp : {  
    domClass   : &#39;dropload-up&#39;,  
    domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,  
    domUpdate  : &#39;<p class="dropload-update">↑释放更新</p>&#39;,  
    domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;  },  
domDown : {  
    domClass   : &#39;dropload-down&#39;,  
    domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,  
    domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,  
    domNoData  : &#39;<p class="dropload-noData">暂无数据</p>&#39;  
   },  
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调用
    $(&#39;.content&#39;).dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;            // 拼接HTML
            var result = &#39;&#39;;
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,//配合后台接口
                dataType: &#39;json&#39;,
                success: function(data){
                    var arrLen = data.length;                    
                        if(arrLen > 0){                        
                            for(var i=0; i<arrLen; i++){
                            result +=   &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
                                            +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
                                            +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
                                            +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
                                        +&#39;</a>&#39;;
                        }                    // 如果没有数据
                    }else{                        // 锁定
                        me.lock();                        // 无数据
                        me.noData();
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $(&#39;.lists&#39;).append(result);                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});</script>

示例二、加载顶部、底部

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

示例三、多次加载

$(function(){
        //利用此写法，可以限制多次加载的个数。
    var timer;

    $(&#39;.header .ipt&#39;).on(&#39;input&#39;,function(){
        var _length = $(this).val();        // 如果输入值不是数字或者是空，就跳出
        if(isNaN(_length) || _length === &#39;&#39;){            
        return false;
        }
        clearTimeout(timer);
        timer = setTimeout(function(){//也可不用定时器
            // 清空内容
            $(&#39;.lists&#39;).html(&#39;&#39;);
            $(&#39;.dropload-down&#39;).remove();            
            var counter = 0;            // 每页展示4个
            var num = 4;            
            var pageStart = 0,pageEnd = 0;            // dropload
            $(&#39;.content&#39;).dropload({
                scrollArea : window,
                loadDownFn : function(me){
                    $.ajax({
                        type: &#39;GET&#39;,
                        url: &#39;json/more.json&#39;,
                        dataType: &#39;json&#39;,
                        success: function(data){
                            var result = &#39;&#39;;
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;                            
                            .for(var i = pageStart; i < pageEnd; i++){
                                result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                                +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                                +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                                +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                            +&#39;</a>&#39;;                                
                                            if((i + 1) >= _length || (i + 1) >= data.lists.length){                                    // 锁定
                                    me.lock();                                    // 无数据
                                    me.noData();                                    
                                    break;
                                }
                            }                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $(&#39;.lists&#39;).append(result);                                // 每次数据加载完，必须重置
                                me.resetload();
                            },1000);
                        },
                        error: function(xhr, type){
                            alert(&#39;Ajax error!&#39;);                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        },500);
    });

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

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

以上是关于dropload.js使用方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：关于正则表达式中\b的认识下一篇：异步搜索jquery select插件的使用方法

查看更多