dropload.js是一款jQuery移动端下拉刷新、上拉加载更多插件。dropload.js可以依赖于jquery或Zepto,实现移动端常见的下拉刷新和上拉加载更多功能。
使用方法
在页面中引入下面的文件。
<link rel="stylesheet" href="../dist/dropload.css"> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="../dist/dropload.min.js"></script>
HTML结构
<div class="content"> <div class="lists"></div> </div>
初始化插件
下拉刷新:
var page = 0;// 页数 var size = 5;// 每页展示5个 $('.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 += data[i].title; } // 如果没有数据 }else{ me.lock(); // 锁定 me.noData(); // 无数据 } // 为了测试,延迟1秒加载 setTimeout(function(){ $('.lists').append(result); // 插入数据到页面,放到最后面 me.resetload(); // 每次数据插入,必须重置 },1000); }, error: function(xhr, type){ alert('Ajax error!'); me.resetload(); // 即使加载出错,也得重置 } }); } });
上拉加载将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使之全屏显示:
<meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true">
该jQuery移动端下拉刷新、上拉加载更多插件的github网址为:https://github.com/ximan/dropload
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!