vue 实现走马灯效果


Posted in Javascript onOctober 28, 2019

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 实现走马灯效果

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

Javascript 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
JS实现json数组排序操作实例分析
Oct 28 #Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 #Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 #Javascript
vue 实现input表单元素的disabled示例
Oct 28 #Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
VUE解决 v-html不能触发点击事件的问题
Oct 28 #Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 #Javascript
You might like
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
js日期时间补零的小例子
2013/03/05 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jquery移动节点实例
2015/01/14 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python logging.info在终端没输出的解决
2020/05/12 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python Pexpect模块的使用
2020/12/25 Python
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
P/Invoke是什么
2015/07/31 面试题
公司端午节活动方案
2014/02/04 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2014年绿化工作总结
2014/12/09 职场文书
总账会计岗位职责
2015/04/02 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js