当前位置：首页 > VUE

vue实现列表无缝循环

2026-01-22 21:53:40VUE

实现无缝循环列表的方法

在Vue中实现列表无缝循环可以通过多种方式完成，常见的有使用CSS动画、JavaScript定时器或第三方库。以下是几种常用方法：

使用CSS动画和transition

通过CSS的animation或transition属性实现无缝滚动效果。定义一个无限循环的动画，控制列表项的移动。

vue实现列表无缝循环

<template>
  <div class="scroll-container">
    <div class="list" :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,
      speed: 1
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      setInterval(() => {
        this.offset -= this.speed;
        if (this.offset <= -this.list.length * 30) {
          this.offset = 0;
        }
      }, 20);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
}
.list {
  transition: transform 0.1s linear;
}
.item {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方库（如vue-seamless-scroll）

vue-seamless-scroll是一个专门用于实现无缝滚动的Vue组件库，安装后可直接使用。

vue实现列表无缝循环

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: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      options: {
        direction: 1,
        limitMoveNum: 2,
        step: 1,
        hoverStop: true
      }
    };
  }
};
</script>

使用requestAnimationFrame优化性能

通过requestAnimationFrame替代setInterval可以优化动画性能，减少卡顿。

<template>
  <div class="scroll-container">
    <div class="list" :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,
      speed: 1,
      animationId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScroll() {
      const animate = () => {
        this.offset -= this.speed;
        if (this.offset <= -this.list.length * 30) {
          this.offset = 0;
        }
        this.animationId = requestAnimationFrame(animate);
      };
      this.animationId = requestAnimationFrame(animate);
    }
  }
};
</script>