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

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