vue实现文本滚动

Vue 实现文本滚动的方法

使用 CSS 动画实现

通过 CSS 的 animation 和 @keyframes 实现文本滚动效果。适用于简单的单行文本滚动。

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

<script>
export default {
  data() {
    return {
      text: "这是一段需要滚动的文本，可以根据需求调整内容和长度。"
    };
  }
};
</script>

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

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

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

使用 Vue 指令实现

自定义 Vue 指令实现更灵活的文本滚动控制，支持暂停和继续。

<template>
  <div v-scroll-text="options">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: "自定义指令实现的文本滚动效果，支持动态调整速度和方向。",
      options: {
        speed: 50, // 像素/秒
        direction: 'left', // left, right, up, down
        pauseOnHover: true
      }
    };
  },
  directives: {
    scrollText: {
      inserted(el, binding) {
        const options = binding.value || {};
        const speed = options.speed || 50;
        const direction = options.direction || 'left';
        const pauseOnHover = options.pauseOnHover !== false;

        let animationId;
        let position = 0;
        const containerWidth = el.offsetWidth;
        const textWidth = el.scrollWidth;

        const animate = () => {
          if (direction === 'left') {
            position -= 1;
            if (-position >= textWidth) position = containerWidth;
          } else if (direction === 'right') {
            position += 1;
            if (position >= containerWidth) position = -textWidth;
          }
          el.style.transform = `translateX(${position}px)`;
          animationId = requestAnimationFrame(animate);
        };

        const startAnimation = () => {
          if (!animationId) {
            animationId = requestAnimationFrame(animate);
          }
        };

        const stopAnimation = () => {
          if (animationId) {
            cancelAnimationFrame(animationId);
            animationId = null;
          }
        };

        startAnimation();

        if (pauseOnHover) {
          el.addEventListener('mouseenter', stopAnimation);
          el.addEventListener('mouseleave', startAnimation);
        }

        el._scrollAnimation = {
          start: startAnimation,
          stop: stopAnimation,
          cleanup: () => {
            stopAnimation();
            if (pauseOnHover) {
              el.removeEventListener('mouseenter', stopAnimation);
              el.removeEventListener('mouseleave', startAnimation);
            }
          }
        };
      },
      unbind(el) {
        if (el._scrollAnimation) {
          el._scrollAnimation.cleanup();
        }
      }
    }
  }
};
</script>

使用第三方库 vue-marquee-text-component

对于更复杂的需求，可以使用专门为 Vue 开发的跑马灯文本组件。

安装依赖：

npm install vue-marquee-text-component

使用示例：

<template>
  <marquee-text :duration="5" :repeat="3">
    {{ text }}
  </marquee-text>
</template>

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

export default {
  components: {
    MarqueeText
  },
  data() {
    return {
      text: "使用第三方库实现的文本滚动效果，支持多种配置选项。"
    };
  }
};
</script>

实现垂直滚动列表

对于需要垂直滚动的列表内容，可以使用 CSS 动画实现。

<template>
  <div class="vertical-scroll-container">
    <ul class="scroll-list">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        "第一条滚动内容",
        "第二条滚动内容",
        "第三条滚动内容",
        "第四条滚动内容"
      ]
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      const container = this.$el.querySelector('.scroll-list');
      const firstItem = container.firstElementChild;

      setInterval(() => {
        container.style.transition = 'transform 0.5s ease';
        container.style.transform = 'translateY(-100%)';

        setTimeout(() => {
          container.style.transition = 'none';
          container.appendChild(firstItem);
          container.style.transform = 'translateY(0)';
        }, 500);
      }, 2000);
    }
  }
};
</script>

<style>
.vertical-scroll-container {
  height: 100px;
  overflow: hidden;
}

.scroll-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>

每种方法适用于不同场景，可根据项目需求选择最合适的实现方式。CSS 动画适合简单效果，自定义指令提供更多控制，第三方库节省开发时间，垂直滚动适用于新闻列表等场景。