当前位置：首页 > VUE

Vue实现几行滚动

2026-02-10 22:13:12VUE

Vue实现滚动效果的方法

使用CSS实现滚动

通过CSS的overflow和animation属性可以实现简单的滚动效果。适用于单行文本或固定高度的内容区域。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <!-- 需要滚动的内容 -->
      <p v-for="item in items" :key="item.id">{{ item.text }}</p>
    </div>
  </div>
</template>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
}
.scroll-content {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

使用Vue的定时器控制滚动

通过JavaScript的setInterval动态修改样式属性，实现更灵活的滚动控制。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <!-- 需要滚动的内容 -->
      <p v-for="item in items" :key="item.id">{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      items: [...], // 你的数据
      scrollSpeed: 1,
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.offset -= this.scrollSpeed;
      // 重置位置实现无限滚动
      if (Math.abs(this.offset) >= this.$refs.scrollContainer.scrollHeight) {
        this.offset = 0;
      }
    }, 50);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  }
};
</script>

使用第三方库vue-seamless-scroll

对于更复杂的需求，可以使用专门为Vue开发的滚动插件，提供丰富的配置选项。

安装：

npm install vue-seamless-scroll

使用示例：

Vue实现几行滚动

<template>
  <vue-seamless-scroll :data="items" :class-option="options">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      items: [...], // 你的数据
      options: {
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 1, // 步长
        limitMoveNum: 5, // 开始滚动的数据量
        hoverStop: true // 悬停停止
      }
    };
  }
};
</script>