当前位置：首页 > VUE

vue实现上下循环滚动

2026-01-22 05:09:25VUE

实现上下循环滚动的Vue组件

使用CSS动画和Vue的动态绑定实现无限循环滚动效果。以下是一个基础实现方案：

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ transform: `translateY(${scrollPosition}px)` }">
      <div v-for="(item, index) in items" :key="index">{{ item }}</div>
      <!-- 克隆元素实现无缝循环 -->
      <div v-for="(item, index) in items" :key="`clone-${index}`">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['内容1', '内容2', '内容3', '内容4'],
      scrollPosition: 0,
      animationId: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startScroll() {
      const scroll = () => {
        this.scrollPosition -= 1
        if (-this.scrollPosition >= this.$el.querySelector('.scroll-content').scrollHeight / 2) {
          this.scrollPosition = 0
        }
        this.animationId = requestAnimationFrame(scroll)
      }
      scroll()
    }
  }
}
</script>

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

.scroll-content {
  position: absolute;
  transition: transform 0.1s linear;
}
</style>

使用CSS动画的简化方案

纯CSS实现方案更简洁且性能更好：

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

<script>
export default {
  data() {
    return {
      items: ['内容1', '内容2', '内容3', '内容4']
    }
  }
}
</script>

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

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

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

动态高度适配方案

当内容高度不确定时，使用JavaScript计算动态高度：

methods: {
  updateScroll() {
    const content = this.$el.querySelector('.scroll-content')
    const clone = content.cloneNode(true)
    this.$el.appendChild(clone)

    const scrollHeight = content.scrollHeight
    const duration = scrollHeight / 50 * 1000 // 根据高度调整速度

    content.style.animation = `scroll ${duration}ms linear infinite`

    // 定义CSS动画
    const style = document.createElement('style')
    style.innerHTML = `
      @keyframes scroll {
        0% { transform: translateY(0); }
        100% { transform: translateY(-${scrollHeight}px); }
      }
    `
    document.head.appendChild(style)
  }
},
mounted() {
  this.$nextTick(() => {
    this.updateScroll()
  })
}

使用第三方库

考虑使用vue-seamless-scroll等现成库快速实现：

npm install vue-seamless-scroll

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      items: ['内容1', '内容2', '内容3', '内容4'],
      options: {
        direction: 2, // 1向上 2向下
        step: 0.5, // 步长
        limitMoveNum: 3 // 起始展示数量
      }
    }
  }
}
</script>

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

以上方案可根据实际需求选择，CSS方案性能最佳，JavaScript方案灵活性最高，第三方库方案开发效率最快。

vue实现上下循环滚动