本文实例为大家分享了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" rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" 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插件下拉刷新和上拉加载使用详解就介绍到这了。赞美是一种激励,给别人赞美的同时,不要忘了也给自己一点赞美。更多相关dropload.js插件下拉刷新和上拉加载使用详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!