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 div 遮罩层封锁整个页面
Jul 10 Javascript
javascript demo 基本技巧
Dec 18 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
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支持断点续传的源码
2010/05/16 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
公司廉洁自律承诺书
2014/03/27 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
师德承诺书
2015/01/20 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
JS实现扫雷项目总结
2021/05/19 Javascript