下拉刷新，上拉加载插件dropload.js使用总结
来源：互联网 发布：文件管理程序软件 编辑：程序博客网 时间：2024/06/06 05:28
第一步，下载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+'">' +'<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(); } }); } });});阅读全文
0 0
- 下拉刷新，上拉加载插件dropload.js使用总结
- 移动端下拉刷新、上拉加载更多插件dropload
- 移动端下拉刷新、上拉加载更多插件dropload的使用
- 使用dragloader.js插件实现上拉加载/下拉刷新..
- 文档dropload.js插件实现webApp网页上滑刷新下拉加载更多
- dropload插件的使用（上拉下滑加载数据）
- js上拉加载、下拉刷新的插件
- js上拉加载、下拉刷新的插件
- 使用XRecyclerview下拉刷新，上拉加载
- dropload.js下拉加载应用
- 上拉加载 下拉刷新
- 下拉刷新 * 上拉加载
- 上拉刷新 下拉加载
- 下拉刷新，上拉加载
- 上拉刷新下拉加载
- 下拉刷新，上拉加载
- 上拉刷新，下拉加载
- 上拉刷新下拉加载
- python之fabric(一):环境env
- NodeJS 模板 -- jade
- 虚函数、纯虚函数、虚基类
- php nl2br()与$_POST用法
- Planet Communcation 2017ACM-ICPCUniversidadNacionaldeColombiaProgrammingContest/Gym101466C
- 下拉刷新，上拉加载插件dropload.js使用总结
- Spark性能调优
- python之fabric(二)：执行模式（转）
- iframe
- 动态规划(一)
- Selenium Java自动化测试学习知识积累-定位页面元素
- 65535--MultiDex的配置
- 2017中国国际纺织面料及辅料（春夏）博览会、2017中国国际纺织纱线（春夏）展览会、2017中国国际家用纺织品及辅料（春夏）博览会会刊（参展商名录）
- C#中Equals和==的比较
