当前位置：首页 > VUE

vue实现轮播文字

2026-03-07 22:37:49VUE

使用 Vue 实现轮播文字

方法一：使用 CSS 动画和 Vue 数据绑定

在 Vue 中通过数据绑定和 CSS 动画实现文字轮播效果。定义一个数组存储需要轮播的文字内容，通过定时器切换当前显示的文字。

<template>
  <div class="text-carousel">
    <div class="text-content" :key="currentIndex">
      {{ texts[currentIndex] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['第一段文字', '第二段文字', '第三段文字'],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.startCarousel()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startCarousel() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.texts.length
      }, 2000)
    }
  }
}
</script>

<style>
.text-carousel {
  height: 30px;
  overflow: hidden;
  position: relative;
}

.text-content {
  position: absolute;
  animation: slide 1s ease-in-out;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

方法二：使用第三方库 vue-awesome-swiper

对于更复杂的轮播需求，可以使用 vue-awesome-swiper 库，它基于 Swiper.js 并提供了 Vue 组件封装。

vue实现轮播文字

安装依赖：

npm install swiper vue-awesome-swiper --save

实现代码：

vue实现轮播文字

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

<script>
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,
        slidesPerView: 1,
        spaceBetween: 30
      }
    }
  }
}
</script>

<style>
.text-swiper {
  height: 50px;
}

.text-item {
  text-align: center;
  line-height: 50px;
}
</style>

方法三：使用 Vue Transition 组件

利用 Vue 的内置 Transition 组件实现文字轮播的过渡效果。

<template>
  <div class="transition-carousel">
    <transition name="fade" mode="out-in">
      <div :key="currentIndex" class="text-item">
        {{ texts[currentIndex] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['公告1', '公告2', '公告3'],
      currentIndex: 0,
      timer: null
    }
  },
  mounted() {
    this.startRotation()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startRotation() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.texts.length
      }, 1500)
    }
  }
}
</script>

<style>
.transition-carousel {
  position: relative;
  height: 30px;
  overflow: hidden;
}

.text-item {
  position: absolute;
  width: 100%;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

注意事项