当前位置：首页 > VUE

vue实现列表上下滚动

2026-02-24 01:16:22VUE

实现列表上下滚动的方案

使用CSS动画实现滚动

通过CSS的animation和@keyframes实现无限滚动效果。适用于静态列表数据。

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

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
}
.scroll-list {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

使用JavaScript定时器实现动态滚动

通过setInterval动态修改列表位置，适用于需要动态控制滚动速度的场景。

export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      scrollPosition: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.scrollPosition -= 1;
      if (this.scrollPosition < -this.list.length * 30) {
        this.scrollPosition = 0;
      }
    }, 50);
  }
}

<template>
  <div class="scroll-container" style="height: 200px; overflow: hidden;">
    <div :style="{ transform: `translateY(${scrollPosition}px)` }">
      <div v-for="(item, index) in list" :key="index" style="height: 30px;">
        {{ item }}
      </div>
    </div>
  </div>
</template>

使用第三方库实现复杂滚动

对于需要复杂交互的滚动效果，可以使用vue-seamless-scroll等专门库。

安装依赖：

npm install vue-seamless-scroll

使用示例：

vue实现列表上下滚动

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  }
}

<template>
  <vue-seamless-scroll 
    :data="list" 
    class="scroll-container"
    :style="{ height: '200px' }"
  >
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </vue-seamless-scroll>
</template>