移动端下拉刷新上拉加载更多jQuery插件

创客云


dropload.js是一款jQuery移动端下拉刷新、上拉加载更多插件。dropload.js可以依赖于jquery或Zepto,实现移动端常见的下拉刷新和上拉加载更多功能。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" href="../dist/dropload.css">
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="../dist/dropload.min.js"></script>

HTML结构

  1. <div class="content">
  2.     <div class="lists"></div>
  3. </div>

下拉刷新

  1. var page = 0;// 页数
  2. var size = 5;// 每页展示5个
  3. $('.content').dropload({
  4.     scrollArea : window,
  5.     loadDownFn : function(me){
  6.         page++;
  7.         // 拼接HTML
  8.         var result = '';
  9.         $.ajax({
  10.             type: 'GET',
  11.             url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  12.             dataType: 'json',
  13.             success: function(data){
  14.                 var arrLen = data.length;
  15.                 if(arrLen > 0){
  16.                     for(var i=0; i<arrLen; i++){
  17.                         result +=   data[i].title;
  18.                     }
  19.                 // 如果没有数据
  20.                 }else{
  21.                     me.lock();  // 锁定
  22.                     me.noData();    // 无数据
  23.                 }
  24.                 // 为了测试,延迟1秒加载
  25.                 setTimeout(function(){
  26.                     $('.lists').append(result); // 插入数据到页面,放到最后面
  27.                     me.resetload(); // 每次数据插入,必须重置
  28.                 },1000);
  29.             },
  30.             error: function(xhr, type){
  31.                 alert('Ajax error!');
  32.                 me.resetload(); // 即使加载出错,也得重置
  33.             }
  34.         });
  35.     }
  36. });

上拉加载��loadUpFn换成loadDownFn即可。

配置参数

参数 说明 默认值 可填值
scrollArea 滑动区域 绑定元素自身 window
domUp 上方DOM {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
}
数组
domDown 下方DOM {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load">○加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
}
数组
autoLoad 自动加载 true true和false
distance 拉动距离 50 数字
threshold 提前加载距离 加载区高度2/3 正整数
loadUpFn 上方function function(me){
//你的代码
me.resetload();
}
loadDownFn 下方function function(me){
//你的代码
me.resetload();
}

API

lock() 锁定dropload

  • lock():智能锁定,锁定上一次加载的方向
  • lock('up'):锁定上方
  • lock('down'):锁定下方

noData() 无数据

  • noData():无数据
  • noData(false):无数据
  • noData(true):有数据

resetload() 重置。每次数据加载完,必须重置。

由于部分Android中UC和QQ浏览器头部有地址栏,并且一开始滑动页面隐藏地址栏时,无法触发scroll和resize,所以会导致部分情况无法使用。解决方案1:增加distance距离,例如DEMO2中distance:50;解决方案2:加meta使之全屏显示:

  1. <meta name="full-screen" content="yes">
  2. <meta name="x5-fullscreen" content="true">

Github网址:https://github.com/ximan/dropload

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/48544.html
云模板

发表评论