当前位置：首页 > VUE

vue实现跑道滚动

2026-03-08 07:11:42VUE

实现跑道滚动效果

在Vue中实现跑道滚动效果通常涉及动态列表的循环展示，常见于轮播图、无限滚动或横向滚动场景。以下是几种典型实现方式：

横向无限滚动效果

使用CSS动画结合Vue数据绑定实现横向无限滚动：

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

<script>
export default {
  data() {
    return {
      items: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'],
      duration: 10
    }
  }
}
</script>

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

.track {
  display: flex;
  animation: scroll linear infinite;
}

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

.item {
  flex-shrink: 0;
  width: 200px;
  margin-right: 20px;
  background: #eee;
  padding: 20px;
}
</style>

动态数据循环滚动

通过JavaScript定时器实现动态数据更新：

vue实现跑道滚动

<template>
  <div class="vertical-track">
    <transition-group name="slide" tag="div">
      <div v-for="item in visibleItems" :key="item.id" class="track-item">
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: Array.from({length: 10}, (_, i) => ({ id: i, text: `Item ${i+1}` })),
      visibleItems: [],
      currentIndex: 0
    }
  },
  mounted() {
    this.visibleItems = this.allItems.slice(0, 5);
    setInterval(this.scrollItems, 1000);
  },
  methods: {
    scrollItems() {
      this.currentIndex = (this.currentIndex + 1) % this.allItems.length;
      this.visibleItems = [
        ...this.allItems.slice(this.currentIndex),
        ...this.allItems.slice(0, this.currentIndex)
      ].slice(0, 5);
    }
  }
}
</script>

<style scoped>
.vertical-track {
  height: 300px;
  overflow: hidden;
}

.track-item {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter {
  transform: translateY(-60px);
}
.slide-leave-to {
  transform: translateY(60px);
}
</style>

使用第三方库

对于复杂需求，可以考虑使用专门库如vue-slick或swiper：

安装Swiper：
```
npm install swiper vue-awesome-swiper
```

基础实现：


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

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

export default { components: { Swiper, SwiperSlide }, data() { return { items: ['Slide1', 'Slide2', 'Slide3', 'Slide4'], swiperOptions: { loop: true, autoplay: { delay: 2500, disableOnInteraction: false } } } } }

```