vue 消息滚动通知栏

最新推荐文章于 2025-04-29 15:37:14 发布

HXH_csdn

最新推荐文章于 2025-04-29 15:37:14 发布

阅读量4.4k

点赞数

文章标签： vue 消息滚动通知栏

本文链接：https://blog.youkuaiyun.com/HXH_csdn/article/details/103187975

版权

本文介绍了一种使用Vue.js创建滚动新闻组件的方法，通过定时更新DOM元素展示新闻列表，实现了从下往上的滚动效果。文章详细解释了如何利用Vue的数据绑定特性，结合HTML和CSS实现流畅的动画过渡。

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

从下往上跑
在这里插入图片描述

<div class="news flex-bet">
	<div class="img flex-bet">
		<img class="nioce" src="../assets/images/home03.png" />
		<img class="icon" src="../assets/images/home04.png" />
	</div>
	<div class="news-cot">
		<ul :class="{marquee_top:animate}">
			<li class="h" v-for="(item,index) in news">{{item.name}}</li>
		</ul>
	</div>
</div>

export default {
		name: "Home",
		data() {
			return{
				animate: false,
		     	news: [
		     		{
		     			name: '对接口白色的可看出'
	     			},{
		     			name: '就的女会计师你开饭店'
	     			},{
		     			name: '机不可失打开的方式'
	     			},{
		     			name: '接口部分都看见你发靠的就是南方'
	     			},{
		     			name: '开办费离开你浪费'
	     			},{
		     			name: '举报你放假你发个技能奉公守法'
	     			}
		     		
		     	]
			}
		},
		methods: {
			showMarquee: function() {
		      this.animate = true;
		
		      setTimeout(() => {
		        this.news.push(this.news[0]);
		
		        this.news.shift();
		
		        this.animate = false;
		      }, 500);
		    }
		}
}

.marquee_top {transition: all 0.5s;margin-top: -45px;}