本文实例为大家分享了dropload.js下拉刷新和上拉加载的具体代码，供大家参考，具体内容如下

第一步，下载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+'" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' +'<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(); } }); } });});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。