vue实现关键词轮播

Vue 实现关键词轮播

基础实现方案

使用 Vue 的 v-for 和 setInterval 实现基础轮播效果：

<template>
  <div class="keyword-carousel">
    <transition name="fade" mode="out-in">
      <span :key="currentIndex">{{ keywords[currentIndex] }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: ['Vue', 'React', 'Angular', 'Svelte'],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.startCarousel()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startCarousel() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.keywords.length
      }, 2000)
    }
  }
}
</script>

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

高级实现方案

增加暂停/继续功能和平滑动画效果：

<template>
  <div 
    class="keyword-carousel" 
    @mouseenter="pauseCarousel" 
    @mouseleave="resumeCarousel"
  >
    <div class="carousel-container">
      <div 
        v-for="(word, index) in keywords" 
        :key="index" 
        class="keyword"
        :class="{ active: currentIndex === index }"
      >
        {{ word }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: ['前端', '后端', '移动端', '云计算'],
      currentIndex: 0,
      interval: null,
      isPaused: false
    }
  },
  mounted() {
    this.startCarousel()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startCarousel() {
      this.interval = setInterval(() => {
        if (!this.isPaused) {
          this.currentIndex = (this.currentIndex + 1) % this.keywords.length
        }
      }, 1500)
    },
    pauseCarousel() {
      this.isPaused = true
    },
    resumeCarousel() {
      this.isPaused = false
    }
  }
}
</script>

<style>
.keyword-carousel {
  height: 40px;
  overflow: hidden;
  position: relative;
}
.carousel-container {
  position: relative;
  height: 100%;
}
.keyword {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}
.keyword.active {
  opacity: 1;
}
</style>

使用第三方库方案

借助 vue-awesome-swiper 实现更丰富的轮播效果：

1. 安装依赖：

   npm install swiper vue-awesome-swiper

2. 组件实现：

   

   
   <template>
   <swiper :options="swiperOptions" class="keyword-swiper">
    <swiper-slide v-for="(word, index) in keywords" :key="index">
      <div class="keyword-item">{{ word }}</div>
    </swiper-slide>
   </swiper>
   </template>

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

export default { components: { Swiper, SwiperSlide }, data() { return { keywords: ['JavaScript', 'TypeScript', 'Python', 'Go'], swiperOptions: { direction: 'vertical', autoplay: { delay: 1500, disableOnInteraction: false }, loop: true, speed: 800, effect: 'fade', fadeEffect: { crossFade: true } } } } }

.keyword-swiper { height: 50px; } .keyword-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #42b983; font-weight: bold; } ```

响应式设计考虑

为适应不同屏幕尺寸，可以添加媒体查询：

@media (max-width: 768px) {
  .keyword-item {
    font-size: 18px;
  }
  .keyword-swiper {
    height: 40px;
  }
}

性能优化建议

对于大量关键词的情况，建议使用虚拟滚动技术或仅保留当前可见的关键词在DOM中，避免不必要的渲染开销。可以使用Vue的<keep-alive>组件缓存已渲染的关键词：

<keep-alive>
  <transition name="fade" mode="out-in">
    <span :key="currentIndex">{{ keywords[currentIndex] }}</span>
  </transition>
</keep-alive>