js点击加载更多可以增加几条数据的显示

Posted 2021-11-04 rose-1121

 

<div class="list">
                    <div class="one">
                        <div class="img">
                            <img src="../img/b6c.png"/>
                        </div>
                        <div class="infor">
                            <p class="detail">2018年8月陕西延长石油延安能源化工有限责任公司全厂一次性顺利试车成功，标志着由陕西美岩石化科技有限公司在此项目中承担的催化剂装填任务圆满完成。</p>
                            <p class="time">2018-6-28</p>
                        </div>
                    </div>
                    <div class="one">
                        <div class="img">
                            <img src="../img/lunbo3.png"/>
                        </div>
                        <div class="infor">
                            <p class="detail">2018年8月陕西延长石油延安能源化工有限责任公司全厂一次性顺利试车成功，标志着由陕西美岩石化科技有限公司在此项目中承担的催化剂装填任务圆满完成。</p>
                            <p class="time">2018-6-28</p>
                        </div>
                    </div>
</div>
<div class="more">加载更多</div>

 

在一个项目中，需要点击更多，之后显示更多的数据，不是获取当前的页面的高度自动加载的 所以算不上懒加载，是js控制的

上面是一些页面的代码

下面是css样式

.newcenter .detail .list {
     overflow: hidden;
 }
 
 .newcenter .detail .list .one {
     margin-top: 0.2rem;
     height: 1.68rem;
     display: flex;
     justify-content: space-between;
 }
 
 .newcenter .detail .list .one .img {
     width: 1.41rem;
     height: 1.28rem;
 }
 
 .newcenter .detail .list .one .img img {
     width: 1.41rem;
     height: 1.28rem;
 }
 
.newcenter .detail .list .one .infor {
     width: 5.56rem;
     position: relative;
 }
 
 .newcenter .detail .list .one .infor .detail {
     margin-top: 0.1rem;
 }
 
 .newcenter .detail .list .one .infor .detail {
     font-size: 0.18rem;
     font-family: MicrosoftYaHei;
     font-weight: bold;
     color: rgba(97, 97, 97, 1);
 }
 
 .newcenter .detail .list .one .infor .time {
     font-size: 0.18rem;
     font-family: MicrosoftYaHei;
     font-weight: bold;
     color: rgba(173, 173, 173, 1);
     text-align: right;
     position: absolute;
     top: 1.3rem;
    right: 0;
 }
 .newcenter .more{
     width:  2.2rem;
     height: 0.8rem;
     margin: 0 auto;
     font-size: 0.24rem;
     background: #A9010A;
     border-radius: 0.2rem;
     text-align: center;
     line-height: 0.8rem;
     color: #FFFFFF;
     margin-top: 0.5rem;
      }

 

具体的js的如下：

var arr = $(‘.detail .list .one‘).length;    //新闻的长度
   var textArr =[]; //新闻列表信息
   var arr =[];  //每次显示的内容
   var num = 1;  //点击次数

   //获取新闻列表信息
    $(‘.detail .list .one‘).each(function(index){
        var t = $(this).html();
        textArr.push(t)
         
    })
    
    //初始化显示的几条新闻信息
    for(var i = 0; i<3;i++){
        var txt = "<div class=‘one‘>"+textArr[i]+"</div>"
        arr.push(txt);
    }
     //页面初始化渲染
    $(‘.detail .list‘).html(arr);
    

    //点击加载更多
    $(‘#more‘).click(function(){
         num++;
        for(var i = arr.length + 1; i < 3 * num; i++) {
            
            if(arr.length< textArr.length){
                var txt = "<div class=‘one‘>" + textArr[i] + "</div>"
                arr.push(txt)
            }else{
                $(this).html(‘没有更多了‘);
                return;
            }
            
        }
        $(‘.detail .list‘).html(arr);
         
        
       
    })

 职场小白，有不正确的或者有更多的可以提意见 耶