当前位置：首页 > VUE

vue实现文字滚动停顿

2026-01-21 09:47:09VUE

实现文字滚动停顿的几种方法

在Vue中实现文字滚动并带有停顿效果，可以通过CSS动画、JavaScript定时器或第三方库来实现。以下是几种常见的实现方式：

使用CSS动画实现

通过CSS的@keyframes和animation属性可以实现文字滚动效果，结合animation-delay或关键帧设置停顿时间。

<template>
  <div class="scroll-container">
    <div class="scroll-text">{{ text }}</div>
  </div>
</template>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0%, 20% {
    transform: translateX(0);
  }
  80%, 100% {
    transform: translateX(-100%);
  }
}
</style>

使用JavaScript定时器实现

通过setInterval和setTimeout控制滚动和停顿时间，实现更灵活的停顿效果。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-text" ref="scrollText">{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段需要滚动并停顿的文字内容。',
      scrollPosition: 0,
      isPaused: false
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      const container = this.$refs.scrollContainer;
      const textElement = this.$refs.scrollText;

      const scroll = () => {
        if (this.isPaused) return;

        this.scrollPosition -= 1;
        textElement.style.transform = `translateX(${this.scrollPosition}px)`;

        if (this.scrollPosition <= -textElement.offsetWidth) {
          this.scrollPosition = container.offsetWidth;
          this.isPaused = true;
          setTimeout(() => {
            this.isPaused = false;
          }, 2000); // 停顿2秒
        }

        requestAnimationFrame(scroll);
      };

      scroll();
    }
  }
};
</script>

使用第三方库（如vue-marquee）

vue-marquee是一个专门用于实现文字滚动的Vue组件，支持停顿效果。

安装：

npm install vue-marquee-text-component

使用：

<template>
  <vue-marquee-text :duration="10" :repeat="4" :paused="isPaused">
    {{ text }}
  </vue-marquee-text>
</template>

<script>
import VueMarqueeText from 'vue-marquee-text-component';

export default {
  components: {
    VueMarqueeText
  },
  data() {
    return {
      text: '这是一段需要滚动并停顿的文字内容。',
      isPaused: false
    };
  },
  mounted() {
    setInterval(() => {
      this.isPaused = !this.isPaused;
    }, 5000); // 每5秒停顿一次
  }
};
</script>

结合Vue Transition实现平滑停顿

通过Vue的过渡效果，可以实现更平滑的停顿和滚动切换。

<template>
  <div class="scroll-container">
    <transition name="scroll" mode="out-in">
      <div :key="currentText" class="scroll-text">{{ currentText }}</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['第一段文字', '第二段文字', '第三段文字'],
      currentIndex: 0,
      interval: null
    };
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex];
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.texts.length;
    }, 3000); // 每3秒切换一次
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-text {
  display: inline-block;
}

.scroll-enter-active, .scroll-leave-active {
  transition: all 1s;
}

.scroll-enter {
  transform: translateX(100%);
}

.scroll-leave-to {
  transform: translateX(-100%);
}
</style>

以上方法可以根据具体需求选择，CSS动画适合简单的滚动效果，JavaScript定时器提供更灵活的控制，而第三方库可以快速实现复杂功能。

vue实现文字滚动停顿