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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
vue3.0 项目搭建和使用流程
Mar 04 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+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
学python安装的软件总结
2019/10/12 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
教师岗位职责范本
2013/12/29 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
奉献演讲稿范文
2014/05/21 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技