jQuery移动端下拉刷新、上拉加载更多插件

dropload.js是一款jQuery移动端下拉刷新、上拉加载更多插件。dropload.js可以依赖于jquery或Zepto，实现移动端常见的下拉刷新和上拉加载更多功能。

使用方法

在页面中引入下面的文件。

<link rel="stylesheet" href="../dist/dropload.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="../dist/dropload.min.js"></script>
                

HTML结构

<div class="content">
    <div class="lists"></div>
</div>
                

初始化插件

下拉刷新：

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(); // 即使加载出错，也得重置
            }
        });
    }
});
                

上拉加载将loadUpFn换成loadDownFn即可。

配置参数

参数	说明	默认值	可填值
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>', domLoad : '<div class="dropload-load">○加载中...</div>', domNoData : '<div class="dropload-noData">暂无数据</div>' }	数组
autoLoad	自动加载	true	true和false
distance	拉动距离	50	数字
threshold	提前加载距离	加载区高度2/3	正整数
loadUpFn	上方function	空	function(me){ //你的代码 me.resetload(); }
loadDownFn	下方function	空	function(me){ //你的代码 me.resetload(); }

API

lock() 锁定dropload

• lock()：智能锁定，锁定上一次加载的方向
• lock('up')：锁定上方
• lock('down')：锁定下方

noData() 无数据

• noData()：无数据
• noData(false)：无数据
• noData(true)：有数据

resetload() 重置。每次数据加载完，必须重置。

由于部分Android中UC和QQ浏览器头部有地址栏，并且一开始滑动页面隐藏地址栏时，无法触发scroll和resize，所以会导致部分情况无法使用。解决方案1：增加distance距离，例如DEMO2中distance:50；解决方案2：加meta使之全屏显示：

<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">                  
                

该jQuery移动端下拉刷新、上拉加载更多插件的github网址为：https://github.com/ximan/dropload