[TOC]
# （一）插件简介
移动端下拉刷新、上拉加载更多插件
# （二）官方网站
https://github.com/ximan/dropload
＞注：官方网站有二维码体验，也有DEMO！
注：https://github.com/ximan/dropload#示例-demo
# （三）最简示例
本站代码： https://gitee.com/hongweizhiyuan/ijquery/tree/master/dropload
本站预览： http://www.ijquery.cn/plugin/dropload/
## １、HTML
```
<div class="content">
<div class="lists"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="../dist/dropload.css">
<script src="../dist/dropload.min.js"></script>
```
## ２、loadUpFn 下拉刷新
```
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(); // 即使加载出错，也得重置
}
});
}
});
```
## ３、loadDownFn 上拉加载
注：将 `loadUpFn` 修改为 `loadDownFn` 即可！
# （四）页码规则
## 1. 一次性加载全部数据
```
var counter = 0;
var num = 4; // 每页展示4个
var pageStart = 0,pageEnd = 0;
//ajax中采用
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
if(pageStart <= data.lists.length){
for(var i = pageStart; i < pageEnd; i++){
}
}
```
## 2. 点击一次请求一页数据
```
var page = 0;// 页数
var size = 5;// 每页展示5个
//ajax的URL采用
page++;
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
```
