东莞微信小程序制作_vue 完成走马灯效果

2021-01-06 17:52 jianzhan
这篇文章主要介绍了vue 实现走马灯效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

Part.2  实现

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

Part.3  代码

HTML

 template 
 div 
 div 
 div 
 div 
 div 
 ul : 
 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  效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。