资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

js怎么实现列表向上无限滚动

这篇文章主要介绍js怎么实现列表向上无限滚动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

芙蓉ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

具体内容如下

先来一张效果图

js怎么实现列表向上无限滚动

html


   
    
  • 商品
  •     
  • 数量(kg)
  •     
  • 单价(元)
  •     
  • 金额(元)
  •                          
  • {{item.name}}
  •       
  • {{item.amount}}kg
  •       
  • {{item.price}}元/kg
  •       {{item.money}}元           
        
       

    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;
    }

    以上是“js怎么实现列表向上无限滚动”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    文章标题:js怎么实现列表向上无限滚动
    网页网址:http://cdkjz.cn/article/ppiiec.html
    返回首页 了解更多建站资讯
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220