vue 消息滚动通知栏

最新推荐文章于 2024-01-18 09:37:12 发布

原创最新推荐文章于 2024-01-18 09:37:12 发布 · 4.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue 消息滚动通知栏

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

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

<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;}