js下拉加载

偏执的太偏执、 2021-12-21 02:49 213阅读 0赞

<input type="hidden" value="${pageNumber}" id="pageNumber">
    <ul class="pro-list" id="view" style="overflow:hidden;">
    <#list goodslist as gl>
    <#if gl??>
    <li class="pro-left">
       <a href="${base}/weixin/item/${gl.id}.html"><img src="${gl.pic}" alt="${gl.fullName}"  title="${gl.fullName}"       class="pro-list-img"/>
       <P>${gl.fullName}</P></a>
       <div class="pro-jg"><span>¥${gl.sprice}</span><a οnclick="joinCart('${gl.id}','1'); return true;" href="javascript:void(0);"><img src="${base}/static/weixin/images/gwc.png" alt=""/ class="pro-jg-img1"></a></div>
       </li>
       <#else>
           <li>暂无数据</li>
       </#if>
    </#list> 
    </ul>
    <div class="j-more"> <a href="javascript:void(0);" οnclick="getPager()">加载更多</a></div>
    <div class="j-loading "><img alt="更多" src="${base}/static/weixin/img/timg.gif"/>正在载入...</div>
    <div class="j-end">已加载全部</div>

==========================================JS===========================================

//记录状态
    var state=true;
    /*模拟下拉加载*/
    $(window).scroll(function(){      
      /*当滚动到最底部以上50像素时， 加载新内容*/
      if ($(document).height() - $(this).scrollTop() - $(this).height()<=50){
         if(state==true) {
            //执行一次获取数据并停止再进来获取数据
            state = false;
            setTimeout("getPager()", 500);
         }
      }                           
    });  
    /*获取分页商品数据*/
    function getPager(){
         $('.j-more').hide();
         $('.j-loading').show();//显示正在加载
         $('.j-end').hide();
         var pager=$("#pageNumber").val();
         var pagerNumber =parseInt(pager)+1;
         $("#pageNumber").val(pagerNumber);
         $.ajax({
          type:"GET",
          url:'${base}/weixin/list/getGoodsPager?pagerNumber='+pagerNumber,
          async:true,
          dataType: 'json',
          success: function(data){
             //data返回的是商品集合
             if(data.length >= 1){
                state=true;//状态继续
               //处理数据，写入页面底部
                var gettpl = document.getElementById('demo').innerHTML;
                laytpl(gettpl).render(data, function(html){
                   $("#view").append(html);
                });
                $('.j-more').show();//显示更多
                $('.j-loading').hide();
                $('.j-end').hide()；
             }else{
                $('.j-more').hide();
                $('.j-loading').hide();
                $('.j-end').show();//显示已加载完
             }
          }
        });
    }