dropload.js插件下拉刷新和上拉加载方法-js教程-PHP中文网

首页

web前端

js教程

dropload.js插件下拉刷新和上拉加载方法

小云云

May 14, 2018 pm 05:18 PM

javascript 加载

本文主要为大家详细介绍了dropload.js插件下拉刷新和上拉加载的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

第一步，下载dropload插件，dropload插件下载地址官方文档：https://github.com/ximan/dropload
第二步，将下载好的dropload插件中的dropload.css，dropload.min.js文件引入到页面中，注意还要引入 Jquery1.7 以上或者 Zepto 二选一，不要同时都引用，因为dropload是基于jquery实现的
第三步，将以下代码放到页面的最底部，注意是最底部，否则dropload插件获取不了高度

**基本代码结构**
//#content为某个p的id 
var dropload = $(&#39;#content&#39;).dropload({ 
//scrollArea很关键，要不然加载更多不起作用 
scrollArea : window, 
domUp : { 
 domClass : &#39;dropload-up&#39;, 
 domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;, 
 domUpdate : &#39;<p class="dropload-update">↑释放更新</p>&#39;, 
 domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39; 
}, 
domDown : { 
 domClass : &#39;dropload-down&#39;, 
 domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;, 
 domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;, 
 domNoData : &#39;<p class="dropload-noData">暂无数据</p>&#39; 
 }, 
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调用
 $(&#39;.content&#39;).dropload({
 scrollArea : window,
 loadDownFn : function(me){
  page++;
  // 拼接HTML
  var result = &#39;&#39;;
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,//配合后台接口
  dataType: &#39;json&#39;,
  success: function(data){
   var arrLen = data.length;
   if(arrLen > 0){
   for(var i=0; i<arrLen; i++){
    result += &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
      +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
      +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
      +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 如果没有数据
   }else{
   // 锁定
   me.lock();
   // 无数据
   me.noData();
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   // 插入数据到页面，放到最后面
   $(&#39;.lists&#39;).append(result);
   // 每次数据插入，必须重置
   me.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   me.resetload();
  }
  });
 }
 });
});
</script>

登录后复制

示例二、加载顶部、底部

<script>
$(function(){
 // 页数
 var page = 0;
 // 每页展示10个
 var size = 10;

 // dropload
 $(&#39;.content&#39;).dropload({
 scrollArea : window,
 domUp : {
  domClass : &#39;dropload-up&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新-自定义内容</p>&#39;,
  domUpdate : &#39;<p class="dropload-update">↑释放更新-自定义内容</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;
 },
 domDown : {
  domClass : &#39;dropload-down&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;,
  domNoData : &#39;<p class="dropload-noData">暂无数据-自定义内容</p>&#39;
 },
 loadUpFn : function(me){
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;json/update.json&#39;,
  dataType: &#39;json&#39;,
  success: function(data){
   var result = &#39;&#39;;
   for(var i = 0; i < data.lists.length; i++){
   result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
     +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
     +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
     +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   $(&#39;.lists&#39;).html(result);
   // 每次数据加载完，必须重置
   me.resetload();
   // 重置页数，重新获取loadDownFn的数据
   page = 0;
   // 解锁loadDownFn里锁定的情况
   me.unlock();
   me.noData(false);
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   me.resetload();
  }
  });
 },
 loadDownFn : function(me){
  page++;
  // 拼接HTML
  var result = &#39;&#39;;
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,
  dataType: &#39;json&#39;,
  success: function(data){
   var arrLen = data.length;
   if(arrLen > 0){
   for(var i=0; i<arrLen; i++){
    result += &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
      +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
      +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
      +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 如果没有数据
   }else{
   // 锁定
   me.lock();
   // 无数据
   me.noData();
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   // 插入数据到页面，放到最后面
   $(&#39;.lists&#39;).append(result);
   // 每次数据插入，必须重置
   me.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   me.resetload();
  }
  });
 },
 threshold : 50
 });
});
</script>

登录后复制

示例三、多次加载

$(function(){
 //利用此写法，可以限制多次加载的个数。
 var timer;

 $(&#39;.header .ipt&#39;).on(&#39;input&#39;,function(){
 var _length = $(this).val();
 // 如果输入值不是数字或者是空，就跳出
 if(isNaN(_length) || _length === &#39;&#39;){
  return false;
 }
 clearTimeout(timer);
 timer = setTimeout(function(){//也可不用定时器
  // 清空内容
  $(&#39;.lists&#39;).html(&#39;&#39;);
  $(&#39;.dropload-down&#39;).remove();

  var counter = 0;
  // 每页展示4个
  var num = 4;
  var pageStart = 0,pageEnd = 0;
  // dropload
  $(&#39;.content&#39;).dropload({
  scrollArea : window,
  loadDownFn : function(me){
   $.ajax({
   type: &#39;GET&#39;,
   url: &#39;json/more.json&#39;,
   dataType: &#39;json&#39;,
   success: function(data){
    var result = &#39;&#39;;
    counter++;
    pageEnd = num * counter;
    pageStart = pageEnd - num;

    for(var i = pageStart; i < pageEnd; i++){
    result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
      +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
      +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
      +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
      +&#39;</a>&#39;;
    if((i + 1) >= _length || (i + 1) >= data.lists.length){
     // 锁定
     me.lock();
     // 无数据
     me.noData();
     break;
    }
    }
    // 为了测试，延迟1秒加载
    setTimeout(function(){
    $(&#39;.lists&#39;).append(result);
    // 每次数据加载完，必须重置
    me.resetload();
    },1000);
   },
   error: function(xhr, type){
    alert(&#39;Ajax error!&#39;);
    // 即使加载出错，也得重置
    me.resetload();
   }
   });
  }
  });
 },500);
 });

登录后复制

示例四、固定布局，加载顶部、底部

$(function(){
 // 按钮操作
 $(&#39;.header .btn&#39;).on(&#39;click&#39;,function(){
 var $this = $(this);
 if(!!$this.hasClass(&#39;lock&#39;)){
  $this.attr(&#39;class&#39;,&#39;btn unlock&#39;);
  $this.text(&#39;解锁&#39;);
  // 锁定
  dropload.lock();
  $(&#39;.dropload-down&#39;).hide();
 }else{
  $this.attr(&#39;class&#39;,&#39;btn lock&#39;);
  $this.text(&#39;锁定&#39;);
  // 解锁
  dropload.unlock();
  $(&#39;.dropload-down&#39;).show();
 }
 });

 // dropload
 var dropload = $(&#39;.inner&#39;).dropload({
 domUp : {
  domClass : &#39;dropload-up&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,
  domUpdate : &#39;<p class="dropload-update">↑释放更新</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;
 },
 domDown : {
  domClass : &#39;dropload-down&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,
  domNoData : &#39;<p class="dropload-noData">暂无数据</p>&#39;
 },
 loadUpFn : function(me){
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;json/update.json&#39;,
  dataType: &#39;json&#39;,
  success: function(data){
   var result = &#39;&#39;;
   for(var i = 0; i < data.lists.length; i++){
   result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39;
     +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
     +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
     +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   $(&#39;.lists&#39;).html(result);
   // 每次数据加载完，必须重置
   dropload.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   dropload.resetload();
  }
  });
 },
 loadDownFn : function(me){
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;json/more.json&#39;,
  dataType: &#39;json&#39;,
  success: function(data){
   var result = &#39;&#39;;
   for(var i = 0; i < data.lists.length; i++){
   result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
     +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
     +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
     +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   $(&#39;.lists&#39;).append(result);
   // 每次数据加载完，必须重置
   dropload.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   dropload.resetload();
  }
  });
 }
 });
});

登录后复制

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7665

CakePHP 教程

1393

C# 教程

1205

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

Stremio字幕不工作；加载字幕时出错 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗？一些Stremio用户报告说，视频中没有显示字幕。许多用户报告说遇到了一条错误消息，上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息：加载字幕时出错加载字幕失败：这可能是您正在使用的插件或您的网络有问题。正如错误消息所说，可能是您的互联网连接导致了错误。因此，请检查您的网络连接，并确保您的互联网工作正常。除此之外，这个错误的背后可能还有其他原因，包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

插入超链接时Outlook冻结 Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题，可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题：检查已安装的加载项更新Outlook暂时禁用您的防病毒软件，然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

See all articles

dropload.js插件下拉刷新和上拉加载方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题