vue头部滚动公告栏

<template>
  <div class="textBox">
    <transition name="slide" v-if="this.list.rank">
      <p class="notice" :key="OnText.id">{{OnText.value}}</p>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      numbers: 0,
      list: {
        money: "",
        rank: [],
        rankCurrRank: ""
      }
    };
  },
  mounted() {
    this.loadDate();
    this.saveMove();
  },
  computed: {
    OnText() {
      let val = this.list.rank[this.numbers];
      return {
        id: this.numbers,
        value: val.nickname + "成功邀请了" + val.num + "好友"
      };
    }
  },
  methods: {
    loadDate() {
      this.getRequest("/share?token=" + token).then(data => {
        if (data.code == 200) {
          this.list = data.data;
        } else {
          alert(data.msg);
        }
      });
    },
    saveMove() {
      let time = setInterval(() => {
        if (this.list.rank.length > 0) {
          if (this.numbers === this.list.rank.length - 1) {
            this.numbers = 0;
          } else {
            this.numbers += 1;
          }
        }
      }, 2000);
    }
  }
};
</script>
<style lang="scss" scoped>
// 公告栏样式
.textBox {
  width: 100vw;
  height: 0.7rem;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  top: 0;
  text-align: center;
  background: #0a0b0b;
  .notice {
    width: 100vw;
    padding: 0.23rem 0;
    font: normal 0.24rem MicrosoftYaHei;
    line-height: 0.25rem;
    letter-spacing: 0.014rem;
    color: #fbeece;
  }
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter-active {
    transition: all 0.5s linear;
  }
  .slide-enter {
    transform: translateY(35px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-35px) scale(1);
  }
}
</style>