当前位置：首页 > VUE

vue实现自动滚动列表

2026-02-23 12:25:01VUE

实现自动滚动列表的方法

在Vue中实现自动滚动列表可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画实现滚动

通过CSS的@keyframes和animation属性可以创建平滑的滚动效果。这种方法简单且性能较好。

<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%);
  }
}

.item {
  height: 40px;
  line-height: 40px;
}
</style>

使用JavaScript定时器控制滚动

vue实现自动滚动列表

通过setInterval动态修改元素的scrollTop或transform属性实现滚动效果，适合需要更精确控制的场景。

<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'],
      scrollPosition: 0,
      scrollSpeed: 1,
      intervalId: null
    }
  },
  mounted() {
    this.startScrolling()
  },
  beforeDestroy() {
    this.stopScrolling()
  },
  methods: {
    startScrolling() {
      this.intervalId = setInterval(() => {
        this.scrollPosition += this.scrollSpeed
        if (this.scrollPosition >= this.$refs.scrollContent.offsetHeight) {
          this.scrollPosition = 0
        }
        this.$refs.scrollContainer.scrollTop = this.scrollPosition
      }, 20)
    },
    stopScrolling() {
      clearInterval(this.intervalId)
    }
  }
}
</script>

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

.item {
  height: 40px;
  line-height: 40px;
}
</style>

使用第三方库实现

vue实现自动滚动列表

如果需要更复杂的功能（如无缝循环滚动），可以使用第三方库如vue-seamless-scroll。

安装库：

npm install vue-seamless-scroll

使用示例：

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      options: {
        direction: 1,
        limitMoveNum: 3,
        step: 1,
        hoverStop: true,
        singleHeight: 40,
        waitTime: 1000
      }
    }
  }
}
</script>

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

.item {
  height: 40px;
  line-height: 40px;
}
</style>