vue如何實(shí)現(xiàn)文字上下滾動(dòng)跑馬燈效果

要在Vue中實(shí)現(xiàn)文字上下滾動(dòng)的跑馬燈效果，可以使用CSS和Vue的動(dòng)態(tài)綁定來實(shí)現(xiàn)。

首先，在Vue組件中定義一個(gè)變量來保存要展示的文字內(nèi)容。然后使用CSS樣式來創(chuàng)建滾動(dòng)效果。

以下是一個(gè)簡單的示例：

<template>
  <div class="marquee-container">
    <div class="marquee" :style="{ top: position + 'px' }">{{ text }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '這是一段要滾動(dòng)的文字',
      position: 0,
      speed: 2, // 滾動(dòng)速度，可根據(jù)需要調(diào)整
      timer: null
    };
  },
  mounted() {
    this.startMarquee();
  },
  beforeDestroy() {
    this.stopMarquee();
  },
  methods: {
    startMarquee() {
      this.timer = setInterval(() => {
        this.position -= this.speed;
        // 當(dāng)文字完全滾出容器時(shí)，重置位置
        const containerHeight = this.$el.offsetHeight;
        const contentHeight = this.$refs.marquee.offsetHeight;
        if (Math.abs(this.position) >= contentHeight) {
          this.position = containerHeight;
        }
      }, 20);
    },
    stopMarquee() {
      clearInterval(this.timer);
    }
  }
};
</script>
<style>
.marquee-container {
  height: 50px; /* 容器高度，可根據(jù)需要調(diào)整 */
  overflow: hidden;
}
.marquee {
  position: relative;
  transition: top 0.2s linear;
}
</style>

在上面的例子中，使用marquee-container類定義了一個(gè)高度固定的容器。在容器內(nèi)部，使用marquee類來包裹要滾動(dòng)的文字內(nèi)容。通過綁定:style屬性，將文字的位置與變量position關(guān)聯(lián)起來。

在mounted鉤子函數(shù)中，調(diào)用startMarquee方法來開始滾動(dòng)效果。在beforeDestroy鉤子函數(shù)中，調(diào)用stopMarquee方法來停止?jié)L動(dòng)。

這樣，當(dāng)組件被渲染時(shí)，文字就會(huì)以指定的速度從上往下滾動(dòng)，并且當(dāng)文字完全滾出容器后，會(huì)重新回到容器頂部重新開始滾動(dòng)。你可以根據(jù)需要調(diào)整滾動(dòng)速度、容器高度和其他樣式。