使用dropload.js插件进行下拉刷新

移动端的下拉刷新是一个比较常见的功能了，网上也有很多框架，插件都有这种功能，所以直接拿来用就好了。

html代码：

<!--选项卡-->
<div class="tab">
    <div class="active fl tabL item">
        <span>少儿培优</span>
    </div>
    <div class="tabR fr item">
        <span>老年大学</span>
    </div>
</div>
<!--选项卡中的内容-->
<div class="content">
        <!--第一页-->
        <ul class="content-01 lists"></ul>
        <!--第二页-->
        <ul class="content-02 lists"></ul>
</div>

script代码

var itemIndex = 0;
var tab1LoadEnd = false;
var tab2LoadEnd = false;

$('.tab .item').on('click',function(){
    var $this = $(this);
    itemIndex = $this.index();
});

//AJAX数据请求JS控制加载
var counter1 = 0;
// 每页展示4个
var num1 = 4;
var pageStart1 = 0,pageEnd1 = 0;

var counter2 = 0;
// 每页展示4个
var num2 = 4;
var pageStart2 = 0,pageEnd2 = 0;
// dropload
var dropload = $('.content').dropload({
    scrollArea : window,
    domDown : {
        domClass : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
        domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        domNoData : '<div class="dropload-noData">暂无更多</div>'
    },
    loadDownFn : function(me){
        // 加载菜单一的数据
        if(itemIndex == '0'){
            $.ajax({
                type: 'GET',
                url:"JSON/jsonL_education.js",
                dataType: 'json',
                success: function(data){
                    var result = '';
                    counter1++;
                    pageEnd1 = num1 * counter1;
                    pageStart1 = pageEnd1 - num1;

                    if(pageStart1 <= data.length){
                        for(var i = pageStart1; i < pageEnd1; i++){
                            result += '<li class="content-A">' +
                                '<div class="fl content-L">' +
                                '<img src='+data[i].image+'>' +
                                '</div>' +
                                '<div class="fr content-R">' +
                                '<h4>'+data[i].title+'</h4>' +
                                '<h5>'+data[i].main+'</h5>' +
                                '<br><em>'+data[i].price+'</em><a href="javascript:void(0);">查看详情</a>' +
                                '</div>'+
                                '</li>';
                            if((i + 1) >= data.length){
                                // 数据加载完
                                tab1LoadEnd = true;
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                                break;
                            }
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.lists').eq(0).append(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },100);
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });

        }
        // 加载菜单二的数据
        else if(itemIndex == '1'){
            var result = '';
            $.ajax({
                type: 'GET',
                url:"JSON/jsonR_education.js",
                dataType: 'json',
                success: function(data){
                    var result = '';
                    counter2++;
                    pageEnd2 = num2 * counter2;
                    pageStart2 = pageEnd2 - num2;
                    if(pageStart2 <= data.length){
                        for(var i = pageStart2; i < pageEnd2; i++){
                            result += '<li class="content-A">' +
                                '<div class="fl content-L">' +
                                '<img src='+data[i].image+'>' +
                                '</div>' +
                                '<div class="fr content-R">' +
                                '<h4>'+data[i].title+'</h4>' +
                                '<h5>'+data[i].main+'</h5>' +
                                '<br><em>'+data[i].price+'</em><a href="javascript:void(0);">查看详情</a>' +
                                '</div>'+
                                '</li>';
                            if((i + 1) >= data.length){
                                // 数据加载完
                                tab2LoadEnd = true;
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                                break;
                            }
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.lists').eq(1).append(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },100);
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    }
});