[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,
```
