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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
js+css实现select的美化效果
Mar 24 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
ionic3 懒加载
Aug 16 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
关于Vue中$refs的探索浅析
Nov 05 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文件包含的几种方式总结
2019/09/19 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
九年级政治教学反思
2014/02/06 职场文书
简单租房协议书范本
2014/08/20 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
导游词之五台山
2019/10/11 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫