当前位置：首页 > VUE

vue实现无缝向上滚动

2026-02-25 03:18:05VUE

Vue实现无缝向上滚动

要实现无缝向上滚动效果，可以使用Vue结合CSS动画或JavaScript定时器。以下是几种常见方法：

使用CSS动画实现

通过CSS的@keyframes和animation属性创建向上滚动动画。

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animation: `scroll ${duration}s linear infinite` }">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      duration: 5
    };
  }
};
</script>

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

.scroll-content {
  animation: scroll 5s linear infinite;
}

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

使用JavaScript定时器实现

通过setInterval动态修改内容位置，实现更灵活的控制。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
      <!-- 复制一份内容用于无缝衔接 -->
      <div v-for="(item, index) in list" :key="index + 'copy'">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      speed: 1,
      timer: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    startScroll() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      let position = 0;

      this.timer = setInterval(() => {
        position -= this.speed;
        if (Math.abs(position) >= content.scrollHeight / 2) {
          position = 0;
        }
        content.style.transform = `translateY(${position}px)`;
      }, 20);
    }
  }
};
</script>

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

.scroll-content {
  transition: transform 0.3s ease;
}
</style>

使用第三方库vue-seamless-scroll

vue-seamless-scroll是一个专门用于实现无缝滚动的Vue组件。

安装：

npm install vue-seamless-scroll

使用：

vue实现无缝向上滚动

<template>
  <vue-seamless-scroll
    :data="list"
    :class-option="option"
    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: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      option: {
        direction: 1, // 0向下，1向上，2向左，3向右
        step: 1, // 步长
        limitMoveNum: 5, // 启动无缝滚动的数据量
        hoverStop: true // 悬停暂停
      }
    };
  }
};
</script>

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