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获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
如何手写一个简易的 Vuex
Oct 10 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来写记数器(详细介绍)
2006/10/09 PHP
php开发环境配置记录
2011/01/14 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python多线程用法实例详解
2015/01/15 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
岗位安全生产责任书
2014/07/28 职场文书
小孩不笨观后感
2015/06/03 职场文书