dropload.js插件下拉刷新和上拉加载怎么用
小编给大家分享一下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 : '↓下拉刷新', domUpdate : '↑释放更新', domLoad : '加载中...' }, domDown : { domClass : 'dropload-down', domRefresh : '↑上拉加载更多', domLoad : '加载中...', domNoData : '暂无数据' }, loadUpFn : function(me){ //下拉刷新需要调用的函数 alert("下拉刷新需要调用的函数"); //重置下拉刷新 me.resetload(); }, loadDownFn : function(me){ //上拉加载更多需要调用的函数 alert("上拉加载更多需要调用的函数"); //定时器函数,为了看出上拉加载更多效果 setTimeout(function(){ // 每次数据加载完,必须重置 me.resetload(); },1000); } });
一些完整的例子 按需查看就好
示例一、加载底部
示例二、加载顶部、底部
示例三、多次加载
$(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 += '' +'' +''+data.lists[i].title+'
' +''+data.lists[i].date+'' +''; 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 : '↓下拉刷新', domUpdate : '↑释放更新', domLoad : '加载中...' }, domDown : { domClass : 'dropload-down', domRefresh : '↑上拉加载更多', domLoad : '加载中...', domNoData : '暂无数据' }, 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 += '' +'' +''+data.lists[i].title+'
' +''+data.lists[i].date+'' +''; } // 为了测试,延迟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 += '' +'' +''+data.lists[i].title+'
' +''+data.lists[i].date+'' +''; } // 为了测试,延迟1秒加载 setTimeout(function(){ $('.lists').append(result); // 每次数据加载完,必须重置 dropload.resetload(); },1000); }, error: function(xhr, type){ alert('Ajax error!'); // 即使加载出错,也得重置 dropload.resetload(); } }); } }); });
以上是“dropload.js插件下拉刷新和上拉加载怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页标题:dropload.js插件下拉刷新和上拉加载怎么用
本文路径:http://azwzsj.com/article/gcpdhi.html