vue 实现轮播文字

使用 Swiper 插件实现轮播文字

安装 Swiper 依赖：

npm install swiper

在 Vue 组件中引入 Swiper：

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

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

export default {
  data() {
    return {
      texts: ['文字1', '文字2', '文字3']
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直方向滚动
      loop: true, // 循环播放
      autoplay: {
        delay: 2000, // 2秒切换一次
        disableOnInteraction: false
      }
    })
  }
}
</script>

<style>
.swiper-container {
  height: 40px;
  overflow: hidden;
}
</style>

使用 CSS 动画实现简单轮播

<template>
  <div class="text-carousel">
    <div class="text-container" :style="{ transform: `translateY(${-currentIndex * 100}%)` }">
      <div class="text-item" v-for="(text, index) in texts" :key="index">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['公告1', '公告2', '公告3'],
      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: 40px;
  overflow: hidden;
  position: relative;
}
.text-container {
  transition: transform 0.5s ease;
}
.text-item {
  height: 40px;
  line-height: 40px;
}
</style>

使用 Vue Transition 组件实现

<template>
  <div class="transition-carousel">
    <transition name="slide" mode="out-in">
      <div :key="currentText" class="text-item">
        {{ currentText }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['消息1', '消息2', '消息3'],
      currentIndex: 0,
      interval: null
    }
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex]
    }
  },
  mounted() {
    this.startCarousel()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startCarousel() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.texts.length
      }, 2000)
    }
  }
}
</script>

<style>
.transition-carousel {
  height: 40px;
  overflow: hidden;
  position: relative;
}
.text-item {
  height: 40px;
  line-height: 40px;
}
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter {
  transform: translateY(40px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateY(-40px);
  opacity: 0;
}
</style>

使用第三方组件 vue-awesome-swiper

安装组件：

npm install vue-awesome-swiper swiper@5.4.5

实现代码：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(text, index) in texts" :key="index">
      {{ text }}
    </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',
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      }
    }
  }
}
</script>

<style>
.swiper-container {
  height: 40px;
}
</style>

以上方法可以根据项目需求选择适合的实现方式，Swiper 插件功能最全面但体积较大，CSS 动画实现最轻量但功能简单，vue-awesome-swiper 提供了 Vue 专用的封装接口。