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

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

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

使用方法
在页面中引入下面的文件。

1
2
3
<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结构

1
2
3
<div class="content">
    <div class="lists"></div>
</div>

初始化插件
下拉刷新:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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(); // 即使加载出错,也得重置
            }
        });
    }
});

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

1
2
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论