当前位置：首页 > VUE

vue实现名单滚动

2026-02-22 19:08:30VUE

Vue 实现名单滚动效果

实现名单滚动可以通过多种方式完成，常见的有使用 CSS 动画、JavaScript 定时器或第三方库。以下是几种实现方法：

使用 CSS 动画实现平滑滚动

通过 CSS @keyframes 和 transform 实现无限滚动效果：

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

<script>
export default {
  data() {
    return {
      list: ['张三', '李四', '王五', '赵六', '钱七']
    };
  }
};
</script>

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

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

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

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

使用 JavaScript 定时器动态更新

通过 setInterval 动态修改数据实现滚动：

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

<script>
export default {
  data() {
    return {
      list: ['张三', '李四', '王五', '赵六', '钱七'],
      visibleList: [],
      currentIndex: 0
    };
  },
  mounted() {
    this.updateVisibleList();
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.list.length;
      this.updateVisibleList();
    }, 1000);
  },
  methods: {
    updateVisibleList() {
      this.visibleList = [
        ...this.list.slice(this.currentIndex),
        ...this.list.slice(0, this.currentIndex)
      ].slice(0, 3);
    }
  }
};
</script>

使用第三方库（如 vue-seamless-scroll）

对于更复杂的需求，可以使用专门为 Vue 设计的滚动库：

安装依赖：
```
npm install vue-seamless-scroll
```

在组件中使用：

vue实现名单滚动


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

import vueSeamlessScroll from 'vue-seamless-scroll'; export default { components: { vueSeamlessScroll }, data() { return { list: ['张三', '李四', '王五', '赵六', '钱七'], scrollOption: { direction: 1, limitMoveNum: 3, step: 1, hoverStop: true, singleHeight: 40, waitTime: 1000 } }; } }; ```