当前位置：首页 > VUE

vue实现列表向上循环

2026-02-23 09:37:34VUE

实现列表向上循环滚动效果

在Vue中实现列表向上循环滚动效果，可以通过CSS动画或JavaScript定时器来实现。以下是几种常见方法：

CSS动画方法

使用CSS的@keyframes和transform属性创建滚动动画：

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animationDuration: duration + 's' }">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
      <!-- 复制一份实现无缝循环 -->
      <div v-for="(item, index) in list" :key="index + '_copy'">{{ item }}</div>
    </div>
  </div>
</template>

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

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  position: absolute;
  animation: scroll linear infinite;
}

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

JavaScript定时器方法

使用setInterval实现更灵活的控制：

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

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

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  position: absolute;
  transition: transform 0.1s linear;
}
</style>

使用第三方库

考虑使用专门处理滚动的库如vue-seamless-scroll：

npm install vue-seamless-scroll

<template>
  <vue-seamless-scroll 
    :data="list" 
    :class-option="options"
    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: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      options: {
        direction: 2, // 0向下 1向上 2向左 3向右
        step: 0.5, // 步长
        limitMoveNum: 3, // 开始滚动的数据量
        hoverStop: true // 悬停暂停
      }
    }
  }
}
</script>

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