vue实现横向无缝滚动

实现横向无缝滚动的思路

横向无缝滚动通常用于展示轮播图或横向列表，核心是通过CSS动画或JavaScript动态调整元素位置，实现循环滚动效果。以下是两种常见实现方式：

CSS动画实现

使用CSS的@keyframes和transform属性实现动画效果，适合简单场景：

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

<style scoped>
.scroll-container {
  width: 100%;
  overflow: hidden;
}
.scroll-content {
  display: flex;
  animation: scroll 10s linear infinite;
  white-space: nowrap;
}
.item {
  flex-shrink: 0;
  padding: 0 20px;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>

JavaScript动态控制

通过定时器动态修改元素位置，适合需要精确控制的场景：

<template>
  <div ref="container" class="scroll-container" @mouseenter="pause" @mouseleave="resume">
    <div ref="content" class="scroll-content">
      <div v-for="(item, index) in doubledItems" :key="index" class="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      speed: 2,
      animationId: null
    }
  },
  computed: {
    doubledItems() {
      return [...this.items, ...this.items] // 克隆一份实现无缝衔接
    }
  },
  mounted() {
    this.startAnimation()
  },
  methods: {
    startAnimation() {
      const container = this.$refs.container
      const content = this.$refs.content
      let position = 0

      const animate = () => {
        position -= this.speed
        if (position <= -content.scrollWidth / 2) {
          position = 0
        }
        content.style.transform = `translateX(${position}px)`
        this.animationId = requestAnimationFrame(animate)
      }
      animate()
    },
    pause() {
      cancelAnimationFrame(this.animationId)
    },
    resume() {
      this.startAnimation()
    }
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  }
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  overflow: hidden;
}
.scroll-content {
  display: flex;
}
.item {
  flex-shrink: 0;
  padding: 0 20px;
}
</style>

性能优化建议

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

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

考虑使用CSS的scroll-snap-type实现分段滚动：

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.item {
  scroll-snap-align: start;
}

注意事项

• 克隆元素时需确保原始数据不变
• 移动端需添加触摸事件支持
• 组件销毁时清除定时器或动画帧
• 动态内容变化时需要重置滚动位置