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 相关文章推荐
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
修改Vue打包后的默认文件名操作
Aug 12 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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实现转换html格式为文本格式的方法
2016/05/16 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
通过实例解析Python return运行原理
2020/03/04 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
我的理想演讲稿
2014/04/30 职场文书
小学教师师德承诺书
2014/05/23 职场文书
法制宣传标语集锦
2014/06/25 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
开展警示教育活动总结
2015/05/09 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
合作协议书格式范本
2016/03/21 职场文书