当前位置：首页 > VUE

vue实现自动滚动列表

2026-01-22 21:41:24VUE

实现自动滚动列表的步骤

在Vue中实现自动滚动列表，可以通过CSS动画或JavaScript动态控制滚动位置来实现。以下是两种常见的实现方式：

使用CSS动画实现

CSS动画适用于简单的滚动效果，性能较好但灵活性较低。

vue实现自动滚动列表

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

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

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

.scroll-content {
  animation: scroll 10s linear infinite;
}

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

使用JavaScript动态控制

JavaScript实现方式更灵活，可以控制滚动速度、暂停等交互。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      scrollSpeed: 1,
      animationFrameId: null
    }
  },
  mounted() {
    this.startScrolling()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrameId)
  },
  methods: {
    startScrolling() {
      const container = this.$refs.scrollContainer
      const content = this.$refs.scrollContent

      if (content.offsetHeight <= container.offsetHeight) return

      let position = 0
      const scroll = () => {
        position += this.scrollSpeed
        if (position >= content.offsetHeight) {
          position = 0
        }
        container.scrollTop = position
        this.animationFrameId = requestAnimationFrame(scroll)
      }
      scroll()
    }
  }
}
</script>

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

无限循环滚动的优化

对于需要无限滚动的列表，可以复制列表内容以实现无缝滚动。

vue实现自动滚动列表

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-content" ref="scrollContent">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
      <div v-for="(item, index) in items" :key="`copy-${index}`" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

添加暂停/继续功能

可以通过控制动画帧请求来暂停和继续滚动。

methods: {
  startScrolling() {
    // ...之前的代码...
    this.isScrolling = true
    this.scroll()
  },
  stopScrolling() {
    cancelAnimationFrame(this.animationFrameId)
    this.isScrolling = false
  },
  toggleScrolling() {
    this.isScrolling ? this.stopScrolling() : this.startScrolling()
  }
}

性能优化建议

对于大型列表，使用虚拟滚动技术避免渲染过多DOM节点。可以考虑使用vue-virtual-scroller等库。

npm install vue-virtual-scroller

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  }
  // ...其他代码...
}

以上方法可以根据具体需求选择或组合使用，CSS动画适合简单场景，JavaScript实现更灵活但需要更多代码控制。