当前位置：首页 > VUE

vue 实现文字滚动

2026-02-10 19:01:36VUE

使用 CSS 动画实现文字滚动

通过 CSS 的 @keyframes 和 animation 属性实现文字横向滚动效果。适用于简单的单行文字滚动需求。

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

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

<style scoped>
.scroll-container {
  width: 300px;
  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>

使用 marquee 标签实现兼容方案

虽然 <marquee> 标签已废弃，但在某些场景下仍可使用。注意这不是推荐做法，仅作兼容性参考。

<template>
  <marquee behavior="scroll" direction="left">
    {{ text }}
  </marquee>
</template>

<script>
export default {
  data() {
    return {
      text: "使用marquee标签实现的滚动文字效果"
    }
  }
}
</script>

列表内容循环滚动

适用于需要循环展示多条信息的场景，通过定时器控制滚动位置。

<template>
  <div class="list-container" ref="list">
    <div 
      v-for="(item, index) in list" 
      :key="index"
      class="list-item"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        "第一条消息",
        "第二条消息",
        "第三条消息",
        "第四条消息"
      ],
      currentIndex: 0
    }
  },
  mounted() {
    this.startScroll()
  },
  methods: {
    startScroll() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.list.length
        this.$refs.list.style.transform = `translateY(-${this.currentIndex * 30}px)`
      }, 2000)
    }
  }
}
</script>

<style scoped>
.list-container {
  height: 30px;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.list-item {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方库实现复杂滚动

对于更复杂的滚动需求，可以考虑使用专门的字幕滚动库，如 vue-seamless-scroll。

安装依赖：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll 
    :data="list" 
    class="seamless-wrap"
  >
    <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: [
        "第一条滚动内容",
        "第二条滚动内容",
        "第三条滚动内容",
        "第四条滚动内容"
      ]
    }
  }
}
</script>

<style>
.seamless-wrap {
  height: 200px;
  overflow: hidden;
}
</style>