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