#vue#文字无限向上滚动

最新推荐文章于 2025-05-25 14:02:34 发布

原创最新推荐文章于 2025-05-25 14:02:34 发布 · 630 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue项目中创建一个文字无限向上滚动的效果，适用于新闻标题滚动展示等场景。通过结合Vue的指令和CSS动画，实现动态更新文本并产生平滑滚动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//html代码
<div class="box-wrap">
	<ul :class="{'move-style': moveFlag}">
		<li v-for=item in list>{{item}}</li>
	</ul>
</div>

//css代码
.box-wrap {
	overflow: hidden;
}
ul {
	height: 160px;
}
li {
	height: 80px;
}
.move-style {
	transform: translateY(-80px);
	transition: all 6s;
}
//js代码
data() {
	return {
		moveFlag:false,
		list: [
			11111,
			22222,
			33333,
			44444,
			55555
		]
	}
}
setInterval(() => {
	//6秒后马上执行动画向上滚动一位
	this.moveFlag = true;
	//把第一位的数据加到数组的后面
	this.list.push(this.list[0]);
	//等动画快结束的时候关掉动画,把第一位的数据删除掉
	setTimeout(() => {
		this.moveFlag = false;
		this.list.shift();
	},5500)
},6000)