Vue 列表滚动

<div :style="{height:height*lineNum + 'px'}" class="rollScreen_container" id="rollScreen_container">
      <ul class="rollScreen_list" :style={transform:transform} :class="{rollScreen_list_unanim:num===0}">
        <li class="rollScreen_once" v-for="(item,index) in contentArr" :key=index :style="{height:height+'px'}">
          <span @click="clickTable(item)">{{item.value}}</span>
        </li>
        <li class="rollScreen_once" v-for="(item,index) in contentArr" :key=index+contentArr.length :style="{height:height+'px'}">
          <span @click="clickTable(item)">{{item.value}}</span>
        </li>
      </ul>
</div>

    props: {
        height: {
            default: 40,
            type: Number
        },
        lineNum: {
            default: 5,
            type: Number
        }
    },
    
    computed: {
        transform: function () {
            return 'translateY(-' + this.num * this.height + 'px)'
        }
    },
    
    created() {
      let _this = this
      setInterval(function () {
        if (_this.num !== _this.contentArr.length) {
          _this.num++
        } else {
          _this.num = 0
        }
      }, 3000)
    }

 .rollScreen_container{
    display: inline-block;
    position:relative;
    overflow: hidden;
  }
  .rollScreen_list{
    transition: 1s linear;
  }
  .rollScreen_list_unanim{
    transition: none
  }

  .todobox {
    text-align: center;
    /* height: 90%; */
  }

  .rollScreen_once span {
    font-size: 16px;
    font-weight: normal;
    color: white;
  }

  .rollScreen_once span:hover {
    color: #008bff;
    cursor:pointer;
  }