vue 消息滚动通知栏

心已赠人 2023-06-15 09:51 116阅读 0赞

从下往上跑  
![在这里插入图片描述][20191121175205596.png]

1

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

2

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

3

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

[20191121175205596.png]: https://img-blog.csdnimg.cn/20191121175205596.png

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android NotificationCompat通知栏

注意阅读： NotificationCompat.Builder（）过时，失效： [https://blog.csdn.net/qq\_32534441/article

深藏阁楼爱情的钟/ 2023年06月21日 08:56/ 0 赞/ 141 阅读

相关 vue 消息滚动通知栏

从下往上跑 ![在这里插入图片描述][20191121175205596.png] 1 <div class="news flex-bet"> <di

心已赠人/ 2023年06月15日 09:51/ 0 赞/ 117 阅读

相关 Vue Notice消息无缝滚动

[https://www.cnblogs.com/conglvse/p/9988134.html][https_www.cnblogs.com_conglvse_p_99881

灰太狼/ 2023年02月14日 13:25/ 0 赞/ 62 阅读

相关 JAVA向win10通知栏推送消息

import java.awt.; public class Main { public static void main

Dear 丶/ 2022年12月26日 14:26/ 0 赞/ 176 阅读

相关【Android】Service管理通知栏通知模板

Service管理通知栏通知模板 > 代码: Manifest: <uses-permission android:name="android.permiss

红太狼/ 2022年11月18日 15:58/ 0 赞/ 231 阅读

相关 Android 通知栏Notification

Android 通知栏Notification 在android的应用层中，涉及到很多应用框架，例如：Service框架，Activity管理机制，Broad

秒速五厘米/ 2022年09月24日 14:20/ 0 赞/ 270 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 330 阅读

相关 Android Notification通知栏消息

Activity: package com.wkk.app8; import android.annotation.TargetApi; i

刺骨的言语ヽ痛彻心扉/ 2022年07月15日 01:46/ 0 赞/ 225 阅读

相关微信小程序-滚动消息通知效果

这次我主要想总结一下[微信小程序][Link 1]实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。　　我们通过vertic

阳光穿透心脏的1/2处/ 2022年06月11日 08:20/ 0 赞/ 248 阅读

相关安卓——Notification通知栏通知

![70][] ![70 1][] ![70 2][] ![70 3][] 很奇怪，我在虚拟机上运行不了，可是代码并没有报错 activity\_m

谁践踏了优雅/ 2022年05月29日 12:26/ 0 赞/ 240 阅读