vue实现竖向轮播

Vue 实现竖向轮播的方法

竖向轮播可以通过多种方式实现，以下是一种基于 Vue 和 CSS 的常见实现方法。

使用 CSS 动画和 Vue 动态绑定

通过 Vue 的动态绑定和 CSS 的 transform 属性，可以实现平滑的竖向轮播效果。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      currentIndex: 0,
      itemHeight: 100, // 每个轮播项的高度
      currentTranslateY: 0,
      interval: null
    };
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    startAutoPlay() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length;
        this.currentTranslateY = -this.currentIndex * this.itemHeight;
      }, 2000);
    }
  }
};
</script>

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

.carousel-container {
  transition: transform 0.5s ease;
}

.carousel-item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}
</style>

使用第三方库（如 Swiper）

如果需要更复杂的功能（如触摸滑动、无限循环等），可以使用 Swiper 库。

安装 Swiper：

npm install swiper

在 Vue 中使用 Swiper：

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

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

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  },
  mounted() {
    new Swiper('.swiper-container', {
      direction: 'vertical',
      loop: true,
      autoplay: {
        delay: 2000,
      },
    });
  }
};
</script>

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

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
}
</style>

使用 Vue 过渡动画

Vue 的 <transition-group> 可以结合 CSS 过渡实现竖向轮播效果。

<template>
  <div class="vertical-carousel">
    <transition-group name="slide" tag="div" class="carousel-container">
      <div class="carousel-item" v-for="(item, index) in visibleItems" :key="item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      visibleItems: ['Item 1', 'Item 2', 'Item 3'],
      interval: null
    };
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    startAutoPlay() {
      this.interval = setInterval(() => {
        this.items.push(this.items.shift());
        this.visibleItems = this.items.slice(0, 3);
      }, 2000);
    }
  }
};
</script>

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

.carousel-container {
  height: 100%;
}

.carousel-item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter {
  transform: translateY(-100px);
  opacity: 0;
}

.slide-leave-to {
  transform: translateY(100px);
  opacity: 0;
}
</style>

以上方法可以根据需求选择适合的实现方式。