js滚动加载数据

最新推荐文章于 2025-06-29 14:58:32 发布
原创最新推荐文章于 2025-06-29 14:58:32 发布 · 3.2k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#滚动加载数据 #滚动条加载
技术专栏收录该内容
20 篇文章
订阅专栏
<html>
 <head></head>
 <body>
  &lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;% String path = request.getContextPath(); %&gt; &lt;%@ taglib prefix=&quot;c&quot; uri=&quot;http://java.sun.com/jsp/jstl/core&quot; %&gt; &lt;%@ taglib uri=&quot;http://java.sun.com/jsp/jstl/fmt&quot; prefix=&quot;fmt&quot; %&gt;    
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>Insert title here</title> 
  <link rel="stylesheet" type="text/css" href="../static/css/common.css" /> 
  <link rel="stylesheet" type="text/css" href="../static/css/index_head.css" /> 
  <link rel="stylesheet" type="text/css" href="../static/css/productlist.css" /> 
  <link rel="shortcut icon" href="../static/images/favicon.ico" /> 
  <script type="text/javascript" src="../static/js/jquery-1.11.1.min.js"></script> 
  <script type="text/javascript" src="../static/js/circle-progress.js"></script> 
  <script type="text/javascript" src="../static/js/productlist.js"></script> 
  <!--根据页面宽度设置宽--> 
  <script>(function(){var b=document.documentElement,a=function(){var a=b.getBoundingClientRect().width;b.style.fontSize=0.05*(640<=a?640:a)+"px"},c=null;window.addEventListener("resize",function(){clearTimeout(c);c=setTimeout(a,300)});a()})();</script>   
  <!-- head部分 --> 
  <header class="clearfix"> 
   <a class="homelink" href="#"> <img src="../static/images/home_icon.png" alt="" /> </a> 
   <a class="uclink" href="#"> <img src="../static/images/user_icon.png" alt="" /> </a> 
  </header> 
  <!-- head部分 --> 
  <!-- 导航 --> 
  <div class="pronav"> 
   <h3>理财投资</h3> 
   <div class="navlist clearfix"> 
    <ul>
      &lt;%-- &lt;%=path%&gt;/index/productList.html?type=newone coop invest transfer--%&gt; 
     <li <c:if="" test="${style == 'newone'}">class='cur'&gt; <p><a href="#" onclick="updateClass('newone')"><font color="white">新手专享</font></a></p> <i></i> </li> 
     <li <c:if="" test="${style == 'coop'}">class='cur'&gt; <p><a href="#" onclick="updateClass('coop')"><font color="white">酷铺专区</font></a></p> <i></i> </li> 
     <li <c:if="" test="${style == 'invest'}">class='cur'&gt; <p><a href="#" onclick="updateClass('invest')"><font color="white">投资专区</font></a></p> <i></i> </li> 
     <li <c:if="" test="${style == 'transfer'}">class='cur'&gt; <p><a href="#" onclick="updateClass('transfer')"><font color="white">债券转让</font></a></p> <i></i> </li> 
    </ul> 
   </div> 
  </div> 
  <!-- //导航 --> 
  <!-- 项目列表 --> 
  <div class="protype"> 
   <div class="typebody">
     &lt;%-- 
    <c:foreach items="${commonList }" var="commonInfo"> 
     <div class="proline"> 
      <p class="protitle">${commonInfo.name}</p> 
      <div class="prodes clearfix"> 
       <div class="prodes-l"> 
        <p class="percentnum">
         <fmt:formatnumber value="${commonInfo.apr*100 }" pattern="0" />%</p> 
        <p class="percentdes">年化收益</p> 
       </div> 
       <div class="prodes-m"> 
        <p class="pricenum">融资金额：
         <fmt:formatnumber type="number" value="${commonInfo.account/10000 }" maxfractiondigits="2" />万</p> 
        <p class="pricenum">期限：${commonInfo.time_limit }</p> 
       </div> 
       <div class="prodes-r"> 
        <div class="circle"> 
         <p>
          <fmt:formatnumber value="${commonInfo.tenderProgress}" type="percent" maxintegerdigits="3" /></p> 
        </div> 
       </div> 
      </div> 
      <a class="investbtn" href="#">立即投资</a> 
     </div> 
    </c:foreach> --%&gt; 
   </div> 
  </div>   
  <script type="text/javascript">
$(function(){
    load('${style}')//没太大用
})
var main = 0;
function load(obj){
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if(scrollTop + windowHeight == scrollHeight){
        main= ++main;//main相当于分页了  没加载一次 main加一  也就是当前页数加1
        getJson(obj);
    }
}
var infoLength = 1;  //目的是为了在没有数据的时候不要再请求后台
function getJson(obj){
    if(infoLength != 0){
        $.ajax({
            url:"productListToJson.html",
            type:"post",
            data:{"pageIndex" : main,"type":obj},//obj为后台接受类型
            dataType:"text",
            success:function(data){
                var jsonArr = eval(data);
                if(jsonArr.length == 0){//如果没有数据 infoLength 设置为0
                    infoLength = 0;
                    $(".typebody").append("<center><a href='#'>亲·没有数据了</a></center>");
                }
                for(var i = 0; i < jsonArr.length; i++){
                    $(".typebody").append('<div class="proline">');
                    $(".typebody").append('<p class="protitle">'+jsonArr[i].name+'</p>');
                    $(".typebody").append('<div class="prodes clearfix"><div class="prodes-l">');
                    $(".typebody").append('<p class="percentnum">'+jsonArr[i].apr*100+'%</p>');
                    $(".typebody").append('<p class="percentdes">年化收益</p></div><div class="prodes-m">');
                    $(".typebody").append('<p class="pricenum">融资金额：'+jsonArr[i].account/10000+'</p>');
                    $(".typebody").append('<p class="pricenum">期限：'+jsonArr[i].time_limit+'</p>');
                    $(".typebody").append('</div><div class="prodes-r"><div class="circle">');
                    $(".typebody").append('<p>'+jsonArr[i].tenderProgress+'</p>');
                    $(".typebody").append('</div></div></div><a class="investbtn" href="#">立即投资</a>');
                    $(".typebody").append('<div class="prodes-r"></div>');
                }
            },error:function(){
                alert("失败");
            } 
        })
    }
}
var style = '${style}';//获取后台传前台的参数
$(window).scroll(function(){//滚动时加载
    load(style);
});
function updateClass(obj){
    infoLength = 1;  //当点击按钮的时候重新赋值为1
    $(".typebody").html("");//点击新的按钮把追加的数据设置为空  重新加载
    main = 0;//并且重新设置当前页数
    style = obj;//当点击按钮的时候重新复制 
    load(obj);
}
</script> 
 </body>
</html>