<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>
vue实现文字上下滚动
最新推荐文章于 2024-07-09 10:45:34 发布