关于使用vue 实现列表滚动

data内

//中间滚动相关============================start============
      timer: null,
      indexes: [],
      next: 10000,//计数
      fineParkList: [],//接收的数据
 //中间滚动相关============================end============

html内

<div class="list">
 <transition-group tag="div">
            <div
              class="list-item"
              v-for="(item,index) in indexes"
              :key="item"
            >
              <span class="circle"></span>
              {{fineParkList[index].parkName}}
            </div>
          </transition-group>
           </div>

读取数据

      this.fineParkList = result.records//接收数据
      this.indexes = []
      for (let i = 0; i < this.fineParkList.length; i++) {
        this.indexes.push(this.next++)
      }
      if (this.timer) {
        clearInterval(this.timer)
      }
      if (this.fineParkList.length > 3) {
          this.timer = setInterval(() => {
          this.indexes.shift()
          this.indexes.push(this.next++)
          const out = this.fineParkList.shift()
          this.fineParkList.push(out)
        }, 3000)
      }

清空

  beforeDestroy(){
   clearInterval(this.timer);
},

css内

 .list {
      position: absolute;
      left: 0;
      right: 0;
      top: 25%;
      margin: auto;
      width: 500px;
      height: 200px;
      overflow: hidden;}
.v-enter {
  opacity: 0;
  transform: translateY(50px);
}
.v-leave-to {
  opacity: 0;
  transform: translateY(-60px);
}
.v-enter-active,
.v-leave-active {
  transition: all 1s;
}

/*v-move 和 v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */

.v-move {
  transition: all 0.6s ease;
}
.v-leave-active {
  position: absolute;
}