vue写移动端跑马灯

一、需求

这是一个红包相关的需求 ，要求的是在红包最上方显示一个跑马的效果，来反复的展示176*****8328用户省了多少钱,图片效果如下： 静态效果图

)

二、实现逻辑

1、，为了通用，小喇叭是固定的，在父元素中去写，这样可以随便换成任何图标。在父元素设置宽高，字体，背景我等，然后子元素遗传就好。后面的信息是上下一直翻滚，数据从接口中获得
2、登录动态添加class改变margin-top+transition来实现向上滚动
3、通过定时器来控制动态添加class和数组的push

二、代码实现

html:
<template>
  <div class="box" v-if="marqueeList.length > 0">
    <div class="marquee">
      <ul class="marquee_list" >
        <li v-for="(item, index) in marqueeList" :key="index" :class="{marquee_top:animate}">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
JS:
data () {
    return {
      animate: false
    }
  },
  mounted () {
    setInterval(this.showMarquee, 2500)
  },
  methods: {
    showMarquee () {
      this.animate = true
      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0])
        this.marqueeList.shift()
        this.animate = false
      }, 500)
    }
  }
Css:
.box{
  flex 1
  display flex
  align-items center
  height 100%
  .marquee{
    position relative
    height 50%
    flex 1
    overflow hidden
    .marquee_list{
      position absolute
      display block
      top 0
      left 0
      li{
        height 100%
        &.marquee_top {
          transition: all 0.5s;
          transform translateY(-100%)
        }
      }
    }
  }
}