web端--向上滚动加载数据展示

实现效果: 

向上轮播数据

 html部分:

<div style="margin-top:10px;width:100%;position: relative;">
   <div class="tbtcContainer">
     <div class="tbtcContainer-scroll">
      <!-- 默认数据 -->
      <ul class="tbtcContainer-scroll-list">
        <li class="winner" v-for="(item, i) in winnerList" :key="i" >
           {{item.no}} {{item.gift}}
        </li>
      </ul>
      <!-- 动态数据 -->
        <ul class="tbtcContainer-scroll-list">
          <li class="winner" v-for="(item, i) in winnerList" :key="i" >
           {{item.no}} {{item.gift}}
          </li>
         </ul>
      </div>
      <div class="tbtcContainer-overlay"></div>
    </div>
</div>

css部分:

.tbtcContainer {
  position: absolute;
  left: 9px;

  &-scroll {
    height: 136px;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &-positionBlock {
      height: 136px;
    }
  }

  &-scroll::-webkit-scrollbar {
    display: none;
  }

  &-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 136px;
  }
  .tbtcContainer-scroll-list{
    & > li{
      margin-top: 10px;
      padding-left: 30px;
      width: 353px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #ECA637;
      font-size: 14px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      text-align: left;
    }
  }
}

js部分:

btocInterval:any
playWinner()

playWinner(){
 // 获取滚动容器
 const container = document.getElementsByClassName('tbtcContainer-scroll')[0];
 this.btocInterval = setInterval(() => {
  container.scrollTop++;
  const numbers = this.randomNum(100,500) // 生成随机数
  let newGift
  /** 以下判断并不重要*/
  if(numbers %3 ===0){
    newGift = 'gets 7-days VIP coupon'
  }
  if(numbers %2 ===0){
     newGift = 'gets Thanksgiving Gifts×5'
  }
  if(numbers %2 ===1){
     newGift = 'gets Message Chat coupons×15'
  }
  if(numbers %4 ===1){
     newGift = 'gets cions×300'
  }
  /** 以上判断并不重要*/
  this.winnerList.push({
     no:`${'M'+numbers+'****'}`,gift:`${newGift}`
   })

 }, 70)
}

// 生成随机数
randomNum(m:number, n:number) {
  return Math.floor(Math.random() * (n - m + 1) + m);
}