在手机端使用dropload实现H5页面上拉加载，下拉刷新

引入dropload.js

dropload.js支持jquery和zepot，以jquery为例，在页面底端引入jquery和dropload.js:

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/dropload.min.js" ></script>

使用dropload.js

$(function(){
    var paging = 1;//页码数
    // dropload函数接口设置
    $('#content').dropload({
        scrollArea : window,
        // 下拉刷新模块显示内容
        domUp : {
            domClass   : 'dropload-up',
            // 下拉过程显示内容
            domRefresh : '<div class="dropload-refresh">↓下拉过程显示内容-下拉刷新-自定义内容</div>',
            // 下拉到一定程度显示提示内容
            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
            // 释放后显示内容
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            // 滑动到底部显示内容
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
            // 内容加载过程中显示内容
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
            // 没有更多内容-显示提示
            domNoData  : '<div class="dropload-noData">暂无数据-自定义内容</div>'
        },
        // 1 . 下拉刷新 回调函数
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                // 每次获取最新的数据即可
                url: '',
                dataType: 'json',
                success: function(data){
                    // $.ajax()虽然接口提供json字符串，但接收到的是 json对象
                    var result = '';
                    // 循环拼接显示内容 DOM
                    // 刷新获取多少数据，显示多少 使用html()重置 lists DOM
                    for(var i = 0; i < data.data.length; i++){
                        result +=   '<a class="item opacity" href="'+data.data[i].link+'">'
                                        +'<img src="'+data.data[i].pic+'" alt="">'
                                        +'<h3>hehe</h3>'
                                        +'<span class="date">'+data.data[i].id+'</span>'
                                    +'</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入加载使用 html() 重置 DOM
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },1000);
                },
                // 加载出错
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        // 2 . 上拉加载更多 回调函数
        loadDownFn : function(me){
            paging++; // 每次请求，页码加1
            $.ajax({
                type: 'GET',
                url: '',
                dataType: 'json',
                success: function(data){
                    // data = JSON.parse(data);
                    var result = '';
                    // 选择需要显示的数据 拼接 DOM
                    for(var i = 0; i < data.data.length; i++){
                        result +=   '<a class="item opacity" href="'+data.data[i].link+'">'
                                        +'<img src="'+data.data[i].pic+'" alt="">'
                                        +'<h3>heheh</h3>'
                                        +'<span class="date">'+data.data[i].id+'</span>'
                                    +'</a>';
                        if(data.data.length<15){
                            // 再往下已经没有数据
                            // 锁定
                            me.lock();
                            // 显示无数据
                            me.noData();
                            break;
                        }
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 加载 插入到原有 DOM 之后
                        $('.lists').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },1000);
                },
                // 加载出错
                error: function(xhr, type){
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });
});

踩坑dropload.js

以前在使用dropload的时候踩过一次坑，时隔一年再次使用dropload的时候仍然踩了一次同样的坑！
页面加载会立即调用dropload的loadDownFn 方法，但是这个时候出现问题了，会一次请求n次接口，把所有的数据请求出来了，是不是想哭了？
经过不断的努力，发现在对#content初始化的时候，#content的高度被我设置成了100%，只需要把这个删掉就好了。

最后

以后使用dropload的时候可能还会遇见各种各样的坑，慢慢更新吧！