移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

先来看下三种加载效果：

DemoOne: 加载底部

DemoTwo: 加载顶部+底部

DemoThree: 固定布局，加载顶部+底部

使用方法

引用css和js

1. <link rel="stylesheet" href="../dist/dropload.min.css">
2. <script src="../dist/dropload.min.js"></script>

$('.element').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                // 代码执行后必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
});

参数列表


        
参数说明默认值可填值

    
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>’,
domUpdate : ‘<div class=”dropload-update”>↓释放加载</div>’,
domLoad : ‘<div class=”dropload-load”>○加载中…</div>’
}数组

    
distance拉动距离50数字

    
loadUpFn上方function空function(me){
//你的代码
me.resetload();
}

    
loadDownFn下方function空function(me){
//你的代码
me.resetload();
}
}

暴露一些功能，可以让dropload更灵活的使用
lock() 锁定dropload
unlock() 解锁dropload

源码下载地址： 本地下载