当前位置：首页 > VUE

vue 实现数据滚动

2026-01-16 22:27:56VUE

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 {
  overflow: hidden;
  width: 100%;
  height: 30px;
}

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

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

使用 Vue 动态绑定样式

通过动态计算 transform 或 margin 实现更灵活的滚动控制。

<template>
  <div class="scroll-container">
    <div 
      class="scroll-content" 
      :style="{ transform: `translateX(${scrollPosition}px)` }"
    >
      {{ scrollText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollText: "动态控制的滚动内容...",
      scrollPosition: 0,
      scrollSpeed: 2
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        if (this.scrollPosition < -this.$el.offsetWidth) {
          this.scrollPosition = this.$el.offsetWidth;
        }
      }, 30);
    }
  }
};
</script>

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

对于复杂需求，可以使用专门为 Vue 设计的滚动库，例如 vue-seamless-scroll。

安装：

npm install vue-seamless-scroll

使用示例：

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['数据1', '数据2', '数据3', '数据4'],
      options: {
        direction: 1, // 0 向下，1 向上
        step: 0.5, // 滚动速度
        limitMoveNum: 2 // 可见项数
      }
    };
  }
};
</script>

无限循环列表滚动

通过动态更新数组实现无限循环的列表滚动效果。

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

<script>
export default {
  data() {
    return {
      list: ['项目1', '项目2', '项目3', '项目4'],
      visibleList: [],
      currentIndex: 0
    };
  },
  mounted() {
    this.updateVisibleList();
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.list.length;
      this.updateVisibleList();
    }, 2000);
  },
  methods: {
    updateVisibleList() {
      this.visibleList = [
        ...this.list.slice(this.currentIndex),
        ...this.list.slice(0, this.currentIndex)
      ];
    }
  }
};
</script>