当前位置：首页 > VUE

vue实现跑道滚动

2026-01-15 04:31:42VUE

Vue实现跑道滚动效果

跑道滚动效果通常指元素在固定区域内循环滚动，常见于轮播图、公告栏等场景。以下是几种实现方式：

使用CSS动画实现

通过CSS的@keyframes和transform属性实现无限滚动效果：

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

<style scoped>
.track-container {
  width: 100%;
  overflow: hidden;
}

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

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

使用Vue的定时器实现

通过JavaScript定时器动态改变元素位置实现更灵活的控制：

<template>
  <div class="track-wrapper" ref="track">
    <div class="track" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in duplicatedItems" :key="index">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 原始数据 */],
      offset: 0,
      speed: 2,
      timer: null
    }
  },
  computed: {
    duplicatedItems() {
      return [...this.items, ...this.items]
    }
  },
  mounted() {
    this.startAnimation()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.timer)
  },
  methods: {
    startAnimation() {
      const animate = () => {
        this.offset -= this.speed
        if (Math.abs(this.offset) >= this.$refs.track.offsetWidth) {
          this.offset = 0
        }
        this.timer = requestAnimationFrame(animate)
      }
      animate()
    }
  }
}
</script>

使用第三方库

借助现有轮播库如Swiper.js可以快速实现：

vue实现跑道滚动

<template>
  <swiper
    :slides-per-view="auto"
    :loop="true"
    :autoplay="{ delay: 3000 }"
  >
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide }
}
</script>