vue实现文字上下滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<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 // 当数组为空时，直接返回
      }
      this.count += this.limit
      if (this.count >= len - 1) {
        // 当前为最后一个时
        this.count = 0 // 从第一个开始
      }
    },
  },
  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>