当前位置：首页 > VUE

vue实现轮播文字

2026-02-10 22:52:20VUE

使用 Vue 实现轮播文字

基础实现（纯 Vue）

通过 Vue 的 v-for 和动态绑定样式实现简单的文字轮播效果：

<template>
  <div class="text-carousel">
    <div 
      class="carousel-item" 
      v-for="(item, index) in items" 
      :key="index"
      :class="{ active: currentIndex === index }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '第一段文字内容' },
        { text: '第二段文字提示信息' },
        { text: '第三条需要轮播的文本' }
      ],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.startCarousel()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startCarousel() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length
      }, 3000)
    }
  }
}
</script>

<style>
.text-carousel {
  position: relative;
  height: 40px;
  overflow: hidden;
}
.carousel-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.carousel-item.active {
  opacity: 1;
}
</style>

使用 CSS 动画实现

通过 CSS @keyframes 实现更流畅的动画效果：

.carousel-container {
  height: 60px;
  overflow: hidden;
  position: relative;
}
.carousel-text {
  animation: scroll 12s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  25% { transform: translateY(-100%); }
  50% { transform: translateY(-200%); }
  75% { transform: translateY(-300%); }
  100% { transform: translateY(0); }
}

使用第三方库（Vue-Awesome-Swiper）

对于更复杂的需求，可以使用专用轮播库：

安装依赖：
```
npm install swiper vue-awesome-swiper
```

组件实现：


<template>
<swiper :options="swiperOption">
 <swiper-slide v-for="(item, index) in texts" :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 { texts: ['公告1', '公告2', '公告3'], swiperOption: { direction: 'vertical', autoplay: { delay: 2000, disableOnInteraction: false }, loop: true } } } }

```

垂直滚动公告栏实现

适用于新闻公告等场景：

<template>
  <div class="notice-container">
    <div class="notice-list" :style="{ transform: `translateY(${translateY}px)` }">
      <div class="notice-item" v-for="(item, index) in notices" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: ['最新公告1', '重要通知2', '系统消息3'],
      currentNotice: 0,
      translateY: 0,
      itemHeight: 40
    }
  },
  mounted() {
    setInterval(this.scrollNotice, 2000)
  },
  methods: {
    scrollNotice() {
      this.currentNotice = (this.currentNotice + 1) % this.notices.length
      this.translateY = -this.currentNotice * this.itemHeight
    }
  }
}
</script>

<style>
.notice-container {
  height: 40px;
  overflow: hidden;
  position: relative;
}
.notice-list {
  transition: transform 0.5s ease;
}
.notice-item {
  height: 40px;
  line-height: 40px;
}
</style>