当前位置：首页 > VUE

Vue实现列表无缝滚动

2026-02-24 12:49:35VUE

Vue实现列表无缝滚动的方法

使用CSS动画实现

通过CSS的@keyframes和animation属性实现无缝滚动效果。适用于静态列表或数据更新不频繁的场景。

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

<style>
.scroll-container {
  overflow: hidden;
  height: 200px;
}
.scroll-content {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

使用JavaScript动态控制

通过定时器和动态更新列表数据实现无缝滚动。适用于需要动态更新数据的场景。

Vue实现列表无缝滚动

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <div v-for="(item, index) in list" :key="index" class="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      offset: 0,
      timer: null
    }
  },
  mounted() {
    this.startScroll()
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.offset -= 1
        if (Math.abs(this.offset) >= this.$refs.container.clientHeight) {
          this.offset = 0
        }
      }, 20)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

使用第三方库

利用现成的Vue滚动组件库如vue-seamless-scroll快速实现无缝滚动效果。

Vue实现列表无缝滚动

安装依赖：

npm install vue-seamless-scroll

使用示例：

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    }
  }
}
</script>