vue 实现走马灯效果

站长资源 2024/11/26 佚名

2 0 1

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>

<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,走马灯,vue跑马灯效果

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue 实现走马灯效果”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

vue 实现走马灯效果

js实现坦克移动小游戏

JS实现json数组排序操作实例分析

评论“vue 实现走马灯效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接