当前位置：首页 > VUE

vue实现数据滚动

2026-02-18 03:56:12VUE

实现数据滚动的基本方法

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

使用CSS动画和v-for渲染列表通过CSS的@keyframes或transition实现滚动效果，结合Vue的数据绑定动态更新内容。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      offset: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.offset -= 1;
      if (this.offset <= -20) {
        this.offset = 0;
        this.items.push(this.items.shift());
      }
    }, 50);
  }
}
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
}
.scroll-content {
  transition: transform 0.05s linear;
}
</style>

使用第三方库vue-seamless-scroll

vue-seamless-scroll是一个专门为Vue设计的无缝滚动组件，安装后可直接使用。

npm install vue-seamless-scroll

<template>
  <vue-seamless-scroll :data="items" :class-option="option">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </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'],
      option: {
        direction: 1,
        step: 0.5,
        limitMoveNum: 3
      }
    }
  }
}
</script>

实现横向滚动效果

横向滚动只需调整CSS和动画方向，原理与纵向滚动类似。

<template>
  <div class="horizontal-scroll">
    <div class="scroll-content" :style="{ transform: `translateX(${offset}px)` }">
      <span v-for="(item, index) in items" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      offset: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.offset -= 1;
      if (this.offset <= -200) {
        this.offset = 0;
      }
    }, 20);
  }
}
</script>

<style>
.horizontal-scroll {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content span {
  margin-right: 50px;
  display: inline-block;
}
</style>

使用requestAnimationFrame优化性能

对于需要更流畅动画的场景，可以使用requestAnimationFrame替代setInterval。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      offset: 0,
      animationId: null
    }
  },
  mounted() {
    const animate = () => {
      this.offset -= 1;
      if (this.offset <= -20) {
        this.offset = 0;
        this.items.push(this.items.shift());
      }
      this.animationId = requestAnimationFrame(animate);
    };
    this.animationId = requestAnimationFrame(animate);
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  }
}
</script>