当前位置：首页 > VUE

vue 实现数据滚动

2026-03-09 03:28:37VUE

vue 实现数据滚动的方法

使用 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: 100%;
  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 动态更新数据位置或内容：

vue 实现数据滚动

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

<script>
export default {
  data() {
    return {
      items: ["数据1", "数据2", "数据3", "数据4"],
      currentIndex: 0
    };
  },
  mounted() {
    setInterval(this.scrollItems, 2000);
  },
  methods: {
    scrollItems() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
      this.$refs.scrollBox.scrollTop = this.currentIndex * 30;
    }
  }
};
</script>

<style>
.scroll-box {
  height: 100px;
  overflow-y: auto;
}
.scroll-item {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方库实现复杂滚动

对于更复杂的滚动需求，可以使用第三方库如 vue-seamless-scroll：

安装库：
```
npm install vue-seamless-scroll
```

在组件中使用：


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

import vueSeamlessScroll from 'vue-seamless-scroll' export default { components: { vueSeamlessScroll }, data() { return { listData: [ { title: "内容1" }, { title: "内容2" }, { title: "内容3" } ], option: { direction: 1, limitMoveNum: 3, step: 1, hoverStop: true } } } } .seamless-wrap { height: 200px; overflow: hidden; } ```

使用 Vue 的过渡动画实现平滑滚动

通过 Vue 的 <transition-group> 实现列表项平滑滚动：

<template>
  <div class="list-container">
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id" class="list-item">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: "项目1" },
        { id: 2, text: "项目2" }
      ]
    };
  },
  mounted() {
    setInterval(() => {
      this.items.push({
        id: Date.now(),
        text: `项目${this.items.length + 1}`
      });
      this.items.shift();
    }, 2000);
  }
};
</script>

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

以上方法可以根据具体需求选择使用，CSS 动画适合简单效果，JavaScript 定时器提供更多控制，第三方库则能快速实现复杂滚动效果，过渡动画则能带来更平滑的视觉体验。