真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯網站制作重慶分公司

js怎么實現列表向上無限滾動

這篇文章主要介紹js怎么實現列表向上無限滾動,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

芙蓉ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯系或者加微信: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怎么實現列表向上無限滾動”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道!


    本文標題:js怎么實現列表向上無限滾動
    文章出自:http://weahome.cn/article/ppiiec.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部