当前位置：首页 > VUE

用vue实现无缝滚动

2026-02-22 10:02:46VUE

实现无缝滚动的思路

无缝滚动的核心在于当内容滚动到末尾时，能够平滑地回到起始位置，形成无限循环的效果。在Vue中可以通过动态操作DOM和CSS动画实现。

用vue实现无缝滚动

基于CSS动画的实现

利用CSS的@keyframes定义滚动动画，结合Vue的动态数据绑定：

用vue实现无缝滚动

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animationDuration: duration + 's' }">
      <span v-for="(item, index) in list" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      duration: 5
    }
  }
}
</script>

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

.scroll-content {
  display: inline-block;
  animation: scroll linear infinite;
}

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

基于JavaScript的动态滚动

通过定时器动态修改滚动位置，实现更灵活的控制：

<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content" ref="content">
      <span v-for="(item, index) in duplicatedList" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C', 'D'],
      speed: 1,
      duplicatedList: []
    }
  },
  mounted() {
    this.duplicatedList = [...this.list, ...this.list]
    this.startScroll()
  },
  methods: {
    startScroll() {
      const wrapper = this.$refs.wrapper
      const content = this.$refs.content
      let offset = 0

      setInterval(() => {
        offset -= this.speed
        if (offset <= -content.scrollWidth / 2) {
          offset = 0
        }
        content.style.transform = `translateX(${offset}px)`
      }, 16)
    }
  }
}
</script>

<style>
.scroll-wrapper {
  width: 300px;
  overflow: hidden;
}

.scroll-content {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.1s linear;
}
</style>

使用第三方库

考虑使用成熟的轮播库如vue-seamless-scroll简化实现：

npm install vue-seamless-scroll

<template>
  <vue-seamless-scroll 
    :data="list" 
    :class-option="options"
  >
    <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: ['Data 1', 'Data 2', 'Data 3'],
      options: {
        direction: 1,
        step: 0.5,
        limitMoveNum: 3
      }
    }
  }
}
</script>