文字上下滚动轮播

<template>
  <div class="text-container">
    <transition class="" name="slide" mode="out-in">
      <p class="text" :key="text.id">{{ text }}</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TextScroll",
  data() {
    return {
      count: 0, // 当前索引
      limit: 2,
      dataList: [
        {
          id: "0",
          val: "1111111",
        },
        {
          id: "1",
          val: "2222222",
        },
        {
          id: "2",
          val: "3333333",
        },
        {
          id: "3",
          val: "4444444",
        },
      ],
      intervalId: null, // 定时器ID
      playTime: 2000, // 定时器执行间隔
    };
  },
  computed: {
    text() {
      return this.dataList
        .slice(this.count, this.count + this.limit )
        .reduce((acc, item) => acc + item.val, "");
    },
  },
  created() {
    this.intervalId = setInterval(() => {
      // 定义定时器
      this.getText();
    }, this.playTime);
  },
  methods: {
    getText() {
      let len = this.dataList.length
      if (len === 0) {
        return; // 当数组为空时，直接返回
      }

      if (this.count >= len - 1) {
        // 当前为最后一个时
        this.count = 0; // 从第一个开始
      } else {
        this.count += this.limit;
      }
    },
  },
  destroyed() {
    clearInterval(this.intervalId); // 清除定时器
  },
};
</script>

<style lang="scss" scoped>
.text-container {
  border: 1px solid red;
  font-size: 14px;
  color: #f56b6b;
  margin-right: 20px;
  height: 60px;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 1s;
}

.slide-enter {
  transform: translateY(40px);
}

.slide-leave-to {
  transform: translateY(-40px);
}
</style>