当前位置：首页 > VUE

vue实现数据滚动

2026-03-30 04:30:38VUE

Vue实现数据滚动的方法

使用CSS动画实现滚动

通过CSS的@keyframes和transform属性实现滚动效果，结合Vue的数据绑定动态更新内容。

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ transform: `translateY(${scrollPosition}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', 'Item 5'],
      scrollPosition: 0,
      scrollSpeed: 1
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        if (Math.abs(this.scrollPosition) >= this.$el.querySelector('.scroll-content').offsetHeight) {
          this.scrollPosition = 0;
        }
      }, 30);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
  position: relative;
}
.scroll-content {
  position: absolute;
  transition: transform 0.3s ease;
}
</style>

使用第三方库vue-seamless-scroll

vue-seamless-scroll是一个专门为Vue设计的无缝滚动组件，配置简单且功能丰富。

安装依赖：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll
    :data="items"
    :class-option="classOption"
  >
    <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', 'Item 5'],
      classOption: {
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 0.5, // 步长
        limitMoveNum: 2, // 起始滚动数量
        hoverStop: true // 悬停暂停
      }
    }
  }
}
</script>

使用JavaScript原生API实现

通过requestAnimationFrame实现高性能滚动，适合需要精细控制滚动行为的场景。

vue实现数据滚动

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

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`),
      animationId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScroll() {
      const container = this.$refs.scrollContainer;
      const content = this.$refs.scrollContent;
      let position = 0;

      const animate = () => {
        position -= 1;
        if (-position >= content.offsetHeight - container.offsetHeight) {
          position = 0;
        }
        content.style.transform = `translateY(${position}px)`;
        this.animationId = requestAnimationFrame(animate);
      };
      animate();
    }
  }
};
</script>

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
  border: 1px solid #eee;
}
.scroll-content {
  transition: transform 0.05s linear;
}
</style>