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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python打开使用的方法
2019/09/30 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
文秘求职信范文
2014/04/10 职场文书
卖车协议书
2014/04/21 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
MySQL 时间类型的选择
2021/06/05 MySQL
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python