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 相关文章推荐
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
JavaScript实现网页计算器功能
Oct 29 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
js 编写规范
2010/03/03 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python中的多重装饰器
2015/04/11 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
诉前财产保全担保书
2014/05/20 职场文书
迎国庆横幅标语
2014/10/08 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
聘任合同书
2015/09/21 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL