当前位置：首页 > VUE

vue实现上下滚动列表

2026-02-21 06:51:09VUE

实现上下滚动列表的方法

使用CSS动画实现滚动

通过CSS的animation和@keyframes实现无限滚动效果。适用于静态内容或少量动态数据。

<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>

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
}
.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定时器实现滚动

通过setInterval动态修改内容位置，适用于需要精确控制滚动速度或动态更新的场景。

vue实现上下滚动列表

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <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'],
      offset: 0,
      timer: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startScroll() {
      const containerHeight = this.$refs.container.clientHeight
      const contentHeight = this.items.length * 40

      this.timer = setInterval(() => {
        this.offset -= 1
        if (Math.abs(this.offset) >= contentHeight - containerHeight) {
          this.offset = 0
        }
      }, 50)
    }
  }
}
</script>

使用第三方库实现滚动

使用vue-seamless-scroll等专门库简化实现，适合复杂滚动需求。

安装库：

vue实现上下滚动列表

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll 
    :data="items" 
    :class-option="option" 
    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'],
      option: {
        direction: 1,
        limitMoveNum: 3,
        step: 1,
        hoverStop: true
      }
    }
  }
}
</script>

无限循环滚动实现

通过动态复制列表内容实现无缝滚动，适合需要连续滚动的场景。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      extendedItems: [],
      offset: 0,
      timer: null
    }
  },
  mounted() {
    this.extendedItems = [...this.items, ...this.items]
    this.startScroll()
  },
  methods: {
    startScroll() {
      const itemHeight = 40
      this.timer = setInterval(() => {
        this.offset -= 1
        if (Math.abs(this.offset) >= this.items.length * itemHeight) {
          this.offset = 0
        }
      }, 50)
    }
  }
}
</script>