当前位置：首页 > VUE

vue实现无缝轮播滚动

2026-02-25 02:23:00VUE

Vue实现无缝轮播滚动的方法

使用CSS动画实现

通过CSS的@keyframes和transform属性实现无限滚动效果，结合Vue的动态数据绑定控制内容更新。

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="scrollStyle">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
      <!-- 复制一份用于无缝衔接 -->
      <div v-for="(item, index) in items" :key="`copy-${index}`" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      scrollPosition: 0,
      animationDuration: 10 // 动画持续时间（秒）
    };
  },
  computed: {
    scrollStyle() {
      return {
        transform: `translateX(${this.scrollPosition}px)`,
        animationDuration: `${this.animationDuration}s`
      };
    }
  },
  mounted() {
    setInterval(() => {
      const containerWidth = this.$el.offsetWidth;
      const contentWidth = this.$el.querySelector('.scroll-content').offsetWidth;
      if (Math.abs(this.scrollPosition) >= contentWidth / 2) {
        this.scrollPosition = 0; // 重置位置
      } else {
        this.scrollPosition -= 1; // 向左滚动
      }
    }, 20);
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
  transition: transform 0.1s linear;
}
.item {
  display: inline-block;
  padding: 0 20px;
}
</style>

使用第三方库（如vue-awesome-swiper）

对于更复杂的轮播需求，推荐使用成熟的轮播库如swiper或vue-awesome-swiper。

安装依赖：

npm install swiper vue-awesome-swiper

示例代码：

<template>
  <swiper :options="swiperOption" class="swiper">
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        speed: 1000
      }
    }
  }
}
</script>

纯JavaScript实现动态滚动

通过动态修改DOM元素位置实现无缝滚动，适合对性能要求较高的场景。

<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content" ref="content">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
      <!-- 克隆元素用于无缝衔接 -->
      <div v-for="(item, index) in items" :key="`clone-${index}`" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Content 1', 'Content 2', 'Content 3'],
      scrollSpeed: 2,
      animationFrame: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
  },
  methods: {
    startScroll() {
      const wrapper = this.$refs.wrapper
      const content = this.$refs.content
      const totalWidth = content.scrollWidth / 2

      const scroll = () => {
        if (content.style.transform === '') {
          content.style.transform = 'translateX(0)'
        }
        const currentX = parseInt(content.style.transform.replace('translateX(', '').replace('px)', '')) || 0

        if (Math.abs(currentX) >= totalWidth) {
          content.style.transform = `translateX(0)`
        } else {
          content.style.transform = `translateX(${currentX - this.scrollSpeed}px)`
        }

        this.animationFrame = requestAnimationFrame(scroll)
      }

      scroll()
    }
  }
}
</script>

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