当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    js实现列表向上无限滚动

    栏目:代码类 时间:2020-01-13 18:12

    本文实例为大家分享了js实现列表向上无限滚动的具体代码,供大家参考,具体内容如下

    先来一张效果图

    html

    <div class="transdata1">
       <ul class="tody-table-header2">
        <li>商品</li>
        <li>数量(kg)</li>
        <li>单价(元)</li>
        <li>金额(元)</li>
       </ul>
       <div >
        <div >
         <ul v-for="(item,index) in todayDetetion2" :key="index">
          <li>{{item.name}}</li>
          <li>{{item.amount}}kg</li>
          <li>{{item.price}}元/kg</li>
          <li >{{item.money}}元</li>
         </ul>
        </div>
        <div ></div>
       </div>
    </div>

    js

    getData() {
       var _this = this;
       this.$axios
        .get("请求的url")
        .then(res => {
         this.todayDetetion2 = res.data.data;
         this.$nextTick(() => {
          this.ScrollUp2();
         });
        })
        .catch(err => {});
      },
      ScrollUp2() {
       var box = document.getElementById("detetion-box2");
       var con1 = document.getElementById("detetion-con1");
       var con2 = document.getElementById("detetion-con2");
       this.speed = 50;
       if (con1.offsetHeight >= box.offsetHeight) {
        con2.innerHTML = con1.innerHTML;
        var timer1 = setInterval(scrol, this.speed);
        function scrol() {
         /*判断滚动内容是否已经滚完,滚完了则滚动的值重新设置到0,否则就每个30默秒向上滚动1px */
         if (box.scrollTop >= con1.scrollHeight) {
          box.scrollTop = 0;
         } else {
          box.scrollTop++;
         }
         /*判断滚动的距离刚好为一条公告的高度时停掉定时器,隔1s之后重新启动计时器即可实现公告滚动停留效果 */
         if (box.scrollTop % 25 == 0) {
          clearInterval(timer1);
          setTimeout(() => {
           timer1 = setInterval(scrol, 30);
          }, 2000);
         }
        }
       }
      }

    css(样式自己调)

    .transdata1 {
     background: url("../../../static/img/transdata_bg.png") no-repeat center/100%
      100%;
     height: 237px;
     padding: 36px 28px 16px 20px;
     box-sizing: border-box;
     transform: translateY(-12px);
    }
    .tody-table-header2 {
     overflow: hidden;
    }
    
    .tody-table-header2 li {
     height: 24px;
     width: 82px;
     line-height: 24px;
     list-style: none;
     float: left;
     font-size: 13px;
     margin-right: 48px;
     font-family: MicrosoftYaHei;
     color: rgba(127, 250, 255, 1);
     text-align: center;
     background: url("../../../static/img/thead_bg.png") no-repeat center/100%;
     background-size: 100% 100%;
    }
    .tody-table-header2 li:last-child {
     margin-right: 0;
    }
    #detetion-box2 {
     margin-top: 13px;
     height: 150px;
     overflow: hidden;
    }
    #detetion-box2 ul {
     overflow: hidden;
     border-bottom: 1px solid #0e579c;
    }
    #detetion-box2 li {
     width: 82px;
     height: 24px;
     line-height: 24px;
     float: left;
     margin-right: 48px;
     font-size: 12px;
     color: #fff;
    }
    #detetion-box2 ul li:last-child {
     margin-right: 0;
    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。