dropload.js插件下拉刷新和上拉加载使用详解


Posted in Javascript onOctober 20, 2017

本文实例为大家分享了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();
  }
  });
 }
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 计算两个整数的百分比值
Dec 26 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
JavaScript html5 canvas实现图片上画超链接
Oct 20 #Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 #Javascript
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
移动端效果之IndexList详解
Oct 20 #Javascript
详解webpack性能优化——DLL
Oct 20 #Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 #Javascript
浅谈如何使用 webpack 优化资源
Oct 20 #Javascript
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
yii上传文件或图片实例
2014/04/01 PHP
php中fsockopen用法实例
2015/01/05 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python3实现微型的web服务器
2019/09/03 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
就业自荐信
2013/12/04 职场文书
给女朋友的道歉信
2014/01/10 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
护士医德医风自我评价
2014/09/15 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2014年施工员工作总结
2014/11/18 职场文书
结婚通知短信大全
2015/04/17 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
小学运动会开幕词
2016/03/04 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技