介绍 & lt; template>
,& lt; div 类=癶ome"比;
& lt;才能div 类=癶ome-box"比;
,,& lt; div 比;
,,,& lt; div 类=癿arquee"比;
,,,,& lt; div 类=癿arquee_box"比;
,,,,,& lt; ul 类=癿arquee_list",:类=皗marquee_top:动画}“比;
,,,,,,& lt; li v=?项目,,指数),拷贝announcementArr",:关键=癷ndex"比;
,,,,,,,& lt; span>{{项}}& lt;/span>
,,,,,,& lt;/li>
,,,,,& lt;/ul>
,,,,& lt;/div>
,,,& lt;/div>
,,& lt;/div>
& lt;才能/div>
,& lt;/div>
& lt;/template> CSS & lt; style 类型=拔谋?css"比;
.home {
,高度:100%;
,显示:flex;
,justify-content:中心;
,对齐项目:中心;
}
.home-box {
,宽度:200 px;
,身高:200 px;
}
.marquee {
,宽度:100%;
,高度:30 px;
,对齐项目:中心;
,颜色:# 3 a3a3a;
,背景颜色:# fdfbde;
,显示:flex;
,box-sizing: border-box;
}
.marquee_box {
,显示:块;
,位置:相对;
,宽度:60%;
,高度:30 px;
,溢出:隐藏;
}
.marquee_list {
,显示:块;
,位置:绝对;
,上图:0;
,左:0;
}
.marquee_top {
,转型:all 0.5年代;
,margin-top: -30 px
}
.marquee_list li {
,高度:30 px;
,行高:30 px;
,字体大小:12 px;
,padding-left: 20 px;
}
.marquee_list li span {
,填充:0,2 px;
,颜色:# f1543a;
}
& lt;/style> & lt; script>
export default {
,,名字:& # 39;回家# 39;
数据才能(),{
,,,return {
,,,,,announcementArr:, [],
,,,,,动画:假
,,,}
,,},
安装(),{才能
,,,this.addAnnouncement ();
,,,setInterval (this.showMarquee, 2000);
,,},
方法:才能,{
,,,addAnnouncement:,()函数,{
,,,,,this.announcementArr =,(& # 39;测试滚动001 & # 39;,& # 39;测试滚动002 & # 39;,& # 39;测试滚动003 & # 39;,& # 39;测试滚动004 & # 39;】
,,,},
,,,showMarquee:,()函数,{
,,,,,this.animate =,真的;
,,,,,setTimeout((),=祝辞,{
,,,,,,,this.announcementArr.push (this.announcementArr [0]);
,,,,,,,this.announcementArr.shift ();
,,,,,,,this.animate =false
,,,,,},,1000)
,,,}
,,}
}
& lt;/script>
这篇文章将为大家详细讲解有关怎么在vue中实现一个走马灯效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
HTML
JS
关于怎么在vue中实现一个走马灯效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
