当前位置：首页 > VUE

vue实现文字滚动

2026-01-18 08:30:50VUE

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: 100%;
  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 的动态绑定实现文字滚动

通过动态绑定样式或类名，结合 JavaScript 控制滚动行为，适用于需要动态控制滚动速度或方向的场景。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div 
      class="scroll-text" 
      :style="{ transform: `translateX(${scrollPosition}px)` }"
    >
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这里是需要滚动的文字内容，可以是较长的文本。",
      scrollPosition: 0,
      scrollSpeed: 2
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        if (this.scrollPosition < -this.$refs.scrollContainer.offsetWidth) {
          this.scrollPosition = this.$refs.scrollContainer.offsetWidth;
        }
      }, 16);
    }
  }
};
</script>

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

.scroll-text {
  display: inline-block;
}
</style>

使用第三方库实现文字滚动

如果需要更复杂的效果（如无缝滚动、暂停控制等），可以使用第三方库如 vue-seamless-scroll。

安装库：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll
    :data="list"
    :class-option="option"
    class="scroll-container"
  >
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      list: ["内容1", "内容2", "内容3", "内容4", "内容5"],
      option: {
        direction: 1, // 0 向下，1 向上，2 向左，3 向右
        step: 1, // 步长
        limitMoveNum: 5, // 起始渲染量
        hoverStop: true // 悬停暂停
      }
    };
  }
};
</script>

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