JS--上划加载更多js代码

原生代码是

<div class="tab">
    <a href="javascript:;" class="item cur">菜单一</a>
    <a href="javascript:;" class="item">菜单二</a>
</div>
<div class="content">
    <div class="lists"></div>
</div>
<link rel="stylesheet" href="./dropload.css">
<script src="./jsdropload.min.js"></script>
<script>
$(function(){
    var itemIndex = 0;
    var tab1LoadEnd = false;
    var tab2LoadEnd = false;
    // tab
    $('.tab .item').on('click',function(){
        var $this = $(this);
        itemIndex = $this.index();
        $this.addClass('cur').siblings('.item').removeClass('cur');
        $('.lists').eq(itemIndex).show().siblings('.lists').hide();

        // 如果选中菜单一
        if(itemIndex == '0'){
            // 如果数据没有加载完
            if(!tab1LoadEnd){
                // 解锁
                dropload.unlock();
                dropload.noData(false);
            }else{
                // 锁定
                dropload.lock('down');
                dropload.noData();
            }
        // 如果选中菜单二
        }else if(itemIndex == '1'){
            if(!tab2LoadEnd){
                // 解锁
                dropload.unlock();
                dropload.noData(false);
            }else{
                // 锁定
                dropload.lock('down');
                dropload.noData();
            }
        }
        // 重置
        dropload.resetload();
    });

    var counter = 0;
    // 每页展示4个
    var num = 4;
    var pageStart = 0,pageEnd = 0;

    // dropload
    var dropload = $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            // 加载菜单一的数据
            if(itemIndex == '0'){
                $.ajax({
                    type: 'GET',
                    url: 'json/more.json',
                    dataType: 'json',
                    success: function(data){
                        var result = '';
                        counter++;
                        pageEnd = num * counter;
                        pageStart = pageEnd - num;

                        if(pageStart <= data.lists.length){
                            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){
                                    // 数据加载完
                                    tab1LoadEnd = true;
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $('.lists').eq(itemIndex).append(result);
                                // 每次数据加载完，必须重置
                                me.resetload();
                            },1000);
                        }
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            // 加载菜单二的数据
            }else if(itemIndex == '1'){
                $.ajax({
                    type: 'GET',
                    url: 'json/update.json',
                    dataType: 'json',
                    success: function(data){
                        var result = '';
                        for(var i = 0; i < data.lists.length; 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>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.lists').eq(itemIndex).append(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        }
    });
});
</script>

经过自己二次开发后的代码是：
 

  <script src="./dropload.min.js"></script>
  <link rel="stylesheet" href="./dropload.css">
  <div class="lists">
    <div class=" swiper-box">
        <div class="swiper_item" id="course">
            <div class="list_swiper "></div>
        </div>
    </div>
  </div>
  <!-- 下拉加载 -->
  <script type="text/javascript">
  $(function(){
      var url     = "http://files.guanfu.com.cn"; 
      //菜单标识符
      var itemIndex   = 0;  
      //是否数据加载完毕
      var tab1LoadEnd = false;
      //请求次数
      var counter     = 0;
      // 每页展示8个
      var num         = 8;
      // 初始化开始
      var pageEnd   = counter*num,pageStart = pageEnd - num;
      // dropload  下拉加载
      var dropload = $('.lists').dropload({
          scrollArea : window,
          loadDownFn : function(me){
            // 加载菜单一的数据
            if(itemIndex == '0'){
                //ajax获取全部数据
                $.ajax({
                    type: 'GET',
                    url: "trip.php?act=data",
                    dataType: 'json',
                    success: function(data){
                        var result = ''; //获取当前数据的偏移值
                        counter++;       //拉取数据次数
                        pageEnd = num * counter;//最大的偏移值 16  24
                        pageStart = pageEnd - num; //8,16
                        if(pageStart <= data.length){//data.length是全部数据的个数
                            for(var i = pageStart; i < pageEnd; i++){
                                  result +=   '<a class="go_url" href="'+data[i].perpetual_url+'">'
                                                  +'<div class="course_item">'
                                                    +'<img class="slide-image" src="'+data[i].cover_url+'">'
                                                    +'<div class="infos">'
                                                      +'<div class="title overflow">'+data[i].title+'</div>'
                                                    +'</div>'
                                                  +'</div>'
                                              +'</a>';
                                if((i + 1) >= data.length){ //这里是限制条件 一旦循环的i超过data.length 那么立即停止加载 锁定
                                    // 数据加载完
                                    立即停止= true;
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $('.list_swiper').eq(itemIndex).append(result);
                                // 每次数据加载完，必须重置
                                me.resetload();
                            },1000);
                        }
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
              }
            }
          });
  });
  </script>

疑惑：一开始我以为是拉取一次执行一次ajax，后来通过打印数据得知是一次拉取全部数据，然后去数据中找偏移量载入

目标修改：去那些数据就去数据库中找哪些数据   不能 全部获取 

 

还有广告轮播js也需要注意一下