vue通过定时器实现垂直滚动公告

<div class="roll">
      <div class="roll-line" />
      <i class="el-icon-bell"></i>
      <ul class="list">
        <li
          v-for="(item, index) in ulList"
          :key="item.id"
          :class="!index && play ? 'toUp' : ''"
        >
          {{ item.msg }}
        </li>
      </ul>
</div>

export default {
  data() {
    return {
      ulList: [
        { msg: "这是第一条信息这是第一条信息这是第一条信息这是第一条信息" },
        { msg: "这是第二条信息这是第二条信息这是第二条信息这是第二条信息" },
        { msg: "这是第三条信息这是第三条信息这是第三条信息这是第三条信息" },
        { msg: "这是第四条信息这是第四条信息这是第四条信息这是第四条信息" },
        { msg: "这是第五条信息这是第五条信息这是第五条信息这是第五条信息" }
      ],
      play: false,
      timer: null, // //接收定时器
    };
  },
  mounted() {  //页面挂载完成时就开始定时器，公告文字滚动
    setInterval(this.startPlay, 4000);
     console.log('开始定时器');
  },
  destroyed() { // 页面销毁时清除定时器
    clearInterval(this.timer); 
    console.log('销毁定时器');
  },
  methods: {
    startPlay() {
      let that = this;
      that.play = true; //开始播放
      that.timer = setTimeout(() => {  //创建并执行定时器
        that.ulList.push(that.ulList[0]); //将第一条数据塞到最后一个
        that.ulList.shift(); //删除第一条数据
        that.play = false; //暂停播放
      }, 500);
      console.log(that.timer);
    },
  }
};

<style lang="scss" scoped>
.roll {
  width: 100%;
  height: 60px; /*关键样式*/
  line-height: 60px; /*关键样式*/
  background: #fff;
  margin-bottom: 24px;
  box-shadow: 4px 0 10px rgba(226, 226, 226, 0.3);
  padding: 0 20px;
  color: #f5212d;
  font-size: 14px;
  display: flex;
  .roll-line {
    width: 2px;
    height: 100%;
    background: #dee2e6;
    margin: 0 20px 0 -20px;
  }
  .el-icon-bell {
    color: #343a40;
    line-height: 60px; /*关键样式*/
    margin-right: 10px;
  }
  .toUp {
    margin-top: -60px; /*关键样式*/
    transition: all 1s; /*关键样式*/
  }
  .list {
    list-style: none;
    width: 100%;
    text-align: center;
    overflow: hidden; /*关键样式*/
    height: 60px; /*关键样式*/
    padding: 0;
    margin: 0;
  }
  li {
    text-align: left;
    height: 60px; /*关键样式*/
    line-height: 60px; /*关键样式*/
  }
}
</style>