vue实现无缝横滚

Vue 实现无缝横滚效果

无缝横滚通常用于实现无限循环的横向滚动效果，常见于轮播图或新闻列表。以下是两种常见实现方式：

使用 CSS 动画 + 数据循环

通过 Vue 管理数据列表，结合 CSS 动画实现滚动效果：

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animationDuration: duration + 's' }">
      <div v-for="(item, index) in duplicatedItems" :key="index" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      duration: 10
    };
  },
  computed: {
    duplicatedItems() {
      return [...this.items, ...this.items];
    }
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  animation: scroll linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.item {
  display: inline-block;
  padding: 0 20px;
}
</style>

使用 JavaScript 动态控制

通过 requestAnimationFrame 实现更精确的控制：

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      speed: 1,
      position: 0,
      animationId: null
    };
  },
  computed: {
    duplicatedItems() {
      return [...this.items, ...this.items];
    }
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startAnimation() {
      const containerWidth = this.$refs.container.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;

      const animate = () => {
        this.position -= this.speed;

        if (-this.position >= contentWidth / 2) {
          this.position = 0;
        }

        this.$refs.content.style.transform = `translateX(${this.position}px)`;
        this.animationId = requestAnimationFrame(animate);
      };

      animate();
    }
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
}

.item {
  display: inline-block;
  padding: 0 20px;
}
</style>

性能优化建议

• 使用 will-change 属性提升动画性能

  

  .scroll-content {
  will-change: transform;
  }

• 对于大量数据，考虑虚拟滚动技术

• 适当使用节流减少重绘频率

两种方式各有优势：CSS 动画实现简单但控制不够灵活；JavaScript 实现控制精确但代码量稍多。可根据实际需求选择合适方案。