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:;
left:;
} .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 实现走马灯效果的更多相关文章

  1. vue 通知 走马灯效果

    封装一个子组件: <template> <div class="container"> <div class="wrap"> ...

  2. 初学VUE 走马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Android TextView走马灯效果

    布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...

  4. android中设置TextView/Button 走马灯效果

    在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml ...

  5. android - TextView单行显示...或者文字左右滚动(走马灯效果)

    条件 TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine=&quo ...

  6. Jquery 图片走马灯效果原理

    本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> & ...

  7. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css3 走马灯效果

    纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes.perspective.perspective-origin.tra ...

  9. setTimeout()与setInterval()——走马灯效果

    JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout ...

随机推荐

  1. c# 字符串大小写转换

    //小转大 string lower = "converted from lowercase"; Console.WriteLine(lower.ToUpper()); //大转小 ...

  2. POJ3461 【KMP(粗糙模板)】

    题意: 给你两个字符串p和s,求出p在s中出现的次数. 这道题,abababa中aba出现了3次. 有其他题是求abababa,aba就是2次. 需注意. KMP 模板 //#include<b ...

  3. 如何有效提升Unity Gear VR游戏性能

    http://www.vr186.com/vr_news/vr_technical_area/1093.html 好的,所以你决定用 Unity 来做一个 VR 游戏,并选定了三星 Gear vr 为 ...

  4. Unity json

    MiniJSON.cs using UnityEngine; using System; using System.Collections; using System.Collections.Gene ...

  5. atcoder#073D(枚舉)

    題目鏈接: http://arc073.contest.atcoder.jp/tasks/arc073_b 題意: 給出n, m兩個數, n是物品數目, m是背包容量, 接下來n行輸入, wi, vi ...

  6. 洛谷P3321 [SDOI2015]序列统计(NTT)

    传送门 题意:$a_i\in S$,求$\prod_{i=1}^na_i\equiv x\pmod{m}$的方案数 这题目太珂怕了……数学渣渣有点害怕……kelin大佬TQL 设$f[i][j]$表示 ...

  7. YII报错笔记:<pre>PHP Notice &#039;yii\base\ErrorException&#039; with message &#039;Uninitialized string offset: 0&#039; in /my/test/project/iot/vendor/yiisoft/yii2/base/Model.php:778

    YII常见报错笔记 报错返回的代码如下: <pre>PHP Notice 'yii\base\ErrorException' with message 'Uninitialized str ...

  8. 100 Same Tree 相同的树

    给定两个二叉树,写一个函数来检查它们是否相同.如果两棵树在结构上相同并且节点具有相同的值,则认为它们是相同的.示例 1:输入 :      1         1             / \    ...

  9. 关于ViewPager高度自适应(随着pager页的高度改变Viewpager的高度)

    该博客借鉴的是某位大神的博客 我只是写一下用后感和总结 博客链接地址 http://blog.csdn.net/qq_34972666/article/details/52386999?locatio ...

  10. RESTful架构搜集

    今天才知道RESTful这个词,感觉好落后呀.自从5月份后很少学习新知识,这是个不好的信号. RESTful是Representational State Transfer的缩写.怎么理解Repres ...