当前位置：首页 > VUE

vue实现数据动态滚动

2026-02-22 20:52:22VUE

Vue 实现数据动态滚动的方法

使用 CSS 动画实现滚动

通过 CSS 的 animation 和 transform 属性实现滚动效果。适用于简单的单向滚动需求。

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

<script>
export default {
  data() {
    return {
      content: "需要滚动的文本内容...",
      scrollPosition: 0,
      scrollSpeed: 2
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
      }, 50);
    }
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
}
</style>

使用 Vue 的过渡动画

利用 Vue 的 <transition> 或 <transition-group> 实现动态滚动，适合列表数据的逐条滚动。

<template>
  <div class="list-container">
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4"]
    };
  },
  mounted() {
    setInterval(() => {
      this.items.push(this.items.shift());
    }, 1000);
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

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

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

安装库：

npm install vue-seamless-scroll

示例代码：

<template>
  <vue-seamless-scroll :data="list" class="seamless-wrap">
    <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: ["Data 1", "Data 2", "Data 3", "Data 4"]
    };
  }
};
</script>

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

实现无限循环滚动

通过动态更新数据实现无限循环效果。

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

<script>
export default {
  data() {
    return {
      items: ["A", "B", "C", "D", "E"],
      visibleItems: [],
      currentIndex: 0
    };
  },
  mounted() {
    this.updateVisibleItems();
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
      this.updateVisibleItems();
    }, 1000);
  },
  methods: {
    updateVisibleItems() {
      this.visibleItems = [
        ...this.items.slice(this.currentIndex),
        ...this.items.slice(0, this.currentIndex)
      ];
    }
  }
};
</script>