当前位置：首页 > VUE

vue实现数据滚动

2026-01-17 11:19:19VUE

Vue 实现数据滚动的方法

使用 CSS 动画实现滚动

通过 CSS 的 animation 和 @keyframes 实现滚动效果。适用于简单的文字或列表滚动。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      {{ scrollText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollText: '这是一段需要滚动的文本内容...'
    }
  }
}
</script>

<style>
.scroll-container {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}

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

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

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

通过 setInterval 动态更新数据或位置，实现更灵活的控制。

<template>
  <div class="scroll-list">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      :style="{ transform: `translateY(${offset}px)` }"
    >
      {{ item }}
    </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>

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

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

安装依赖：

npm install vue-seamless-scroll

示例代码：

<template>
  <vue-seamless-scroll 
    :data="list" 
    class="scroll-wrap"
  >
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.title }}
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' }
      ]
    }
  }
}
</script>

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