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

当前位置:主页 > jQuery库 > 工具类 > jQuery移动端下拉刷新、上拉加载更多插件
jQuery移动端下拉刷新、上拉加载更多插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-05-27
    阅读:
简要教程

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

相关插件