本文介绍了如何使用Vue创建一个上下滚动的公告栏。通过在`text-scroll.vue`组件中设置定时器和计算属性，实现了数据列表的平滑过渡效果。在组件销毁时清除定时器以避免资源浪费。此外，还讨论了`setInterval`和`setTimeout`的区别以及在特定场景下如何选择。
代码实现：
在项目结构的components中新建text-scroll.vue文件
{ {text.val}}
export default {
name: 'TextScroll',
props: {
dataList: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
count: 0, // 当前索引
intervalId: null, // 定时器ID
playTime: 2000, // 定时器执行间隔
};
},
computed: {
text() {
return {
id: this.count,
val: this.dataList[this.count],
};
},
},
created() {
this.intervalId = setInterval(() => { // 定义定时器
this.getText();
}, this.playTime);
},
methods: {
getText() {
cons
最低0.47元/天 解锁文章
3401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
