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 页面全选框实践代码
Apr 02 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
django用户登录验证的完整示例代码
2019/07/21 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
学习新党章思想汇报
2014/01/09 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
教师考核鉴定意见
2015/06/05 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书