关于dropload.js使用方法

欧阳锋 · 发表于 2022-5-23 15:50:39

第一步，下载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.link+'">'

                                             +'<img src="'+data.lists.pic+'" alt="">'

                                             +'<h3>'+data.lists.title+'</h3>'

                                             +'<span class="date">'+data.lists.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使用方法的详细内容

		自动登录	找回密码
密码			会员注册

[CSS/Html] 关于dropload.js使用方法