:

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

song100e 发布于:2016-1-20 14:45 分类:JavaScript  有 8870 人浏览,获得评论 0 条 标签: zepto 

作者最近在处理一个APP端嵌入页面,用到了zepto库,加载一个列表时,本打算一次性数据展示完毕,可被产品经理要求做类似分页功能,于是采用上划ajax加载更多处理,于是找到了本插件,小费周折,也做了部分改动。这里以作记录,聊以备忘。

GitHub地址:https://github.com/ximan/dropload

使用方法:

<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>
<script>
$(function(){
    var counter = 0;
    // 每页展示4个
    var num = 4;
    var pageStart = 0,pageEnd = 0;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/more.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    counter++;
                    pageEnd = num * counter;
                    pageStart = pageEnd - num;

                    for(var i = pageStart; i < pageEnd; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                        if((i + 1) >= data.lists.length){
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                            break;
                        }
                    }
                    // 为了测试,延迟1秒加载
                    setTimeout(function(){
                        $('.lists').append(result);
                        // 每次数据加载完,必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错,也得重置
                    me.resetload();
                }
            });
        }
    });
});
</script>



赞助我,共同学习进步!