Part.1 问题
在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果
Part.2 实现
我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果
Part.3 代码
<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>
<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>
<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 实现走马灯效果_气质_前端开发者》
» 本文链接地址:https://www.rokub.com/71008.html
» 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册