<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>
文字上下滚动轮播
最新推荐文章于 2024-07-05 09:50:50 发布