vue 实现走马灯效果

Part.1  问题

在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果

Part.2  实现

我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果

Part.3  代码

HTML

<template>
<div class="home">
<div class="home-box">
<div style="background: #fdfbde">
<div class="marquee">
<div class="marquee_box">
<ul class="marquee_list" :class="{marquee_top:animate}">
<li v-for="(item, index) in announcementArr" :key="index">
<span>{{item}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>

CSS

<style type="text/css">
.home {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.home-box {
width: 200px;
height: 200px;
}
.marquee {
width: 100%;
height: 30px;
align-items: center;
color: #3A3A3A;
background-color: #fdfbde;
display: flex;
box-sizing: border-box;
}

.marquee_box {
display: block;
position: relative;
width: 60%;
height: 30px;
overflow: hidden;
}

.marquee_list {
display: block;
position: absolute;
top: 0;
left: 0;
}

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

.marquee_list li {
height: 30px;
line-height: 30px;
font-size: 12px;
padding-left: 20px;
}

.marquee_list li span {
padding: 0 2px;
color: #f1543a;
}
</style>

JS

<script>
export default {
name: 'Home',
data() {
return {
announcementArr: [],
animate: false
}
},
mounted() {
this.addAnnouncement();

setInterval(this.showMarquee, 2000);
},
methods: {
addAnnouncement: function() {
this.announcementArr = ['测试滚动001','测试滚动002','测试滚动003','测试滚动004']
},
showMarquee: function() {
this.animate = true;
setTimeout(() => {
this.announcementArr.push(this.announcementArr[0]);
this.announcementArr.shift();
this.animate = false
}, 1000)
}
}
}
</script>

Part.4  注意点

在 js 中我使用的是  setInterval 中 利用 setTimeout 来调用方法

方法详解：

           setInterval  ―― 会不停的调用函数

           setTimeout ―― 只会执行函数一次

这么写的原因：

如果单纯的使用 setInterval 会导致页面卡死，原因与JS引擎线程有关(有兴趣的童鞋可以研究一下)，setInterval  不会清除定时器队列，每次重复执行会导致定时器叠加，最终卡死网页。而 setTimeout 是自带清除定时器的

Part.5  效果

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• Vue.js轮播图走马灯代码实例（全）
• vue实现文字横向无缝走马灯组件效果的实例代码
• vue实现图片滚动的示例代码(类似走马灯效果)