vue实现上下轮播

Vue实现上下轮播

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

通过Vue的数据绑定和CSS的transition或animation实现上下轮播效果。

<template>
  <div class="slider-container">
    <div class="slider" :style="{ transform: `translateY(${currentPosition}px)` }">
      <div class="slide" 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'],
      currentIndex: 0,
      currentPosition: 0,
      slideHeight: 50, // 每个slide的高度
    };
  },
  mounted() {
    this.startSlider();
  },
  methods: {
    startSlider() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length;
        this.currentPosition = -this.currentIndex * this.slideHeight;
      }, 2000);
    },
  },
};
</script>

<style>
.slider-container {
  height: 50px;
  overflow: hidden;
}

.slider {
  transition: transform 0.5s ease;
}

.slide {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

方法二：使用Vue的Transition组件

利用Vue的Transition组件结合CSS实现平滑的上下轮播效果。

<template>
  <div class="slider-container">
    <transition name="slide" mode="out-in">
      <div class="slide" :key="currentIndex">
        {{ items[currentIndex] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      currentIndex: 0,
    };
  },
  mounted() {
    this.startSlider();
  },
  methods: {
    startSlider() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length;
      }, 2000);
    },
  },
};
</script>

<style>
.slider-container {
  height: 50px;
  overflow: hidden;
}

.slide {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

如果需要更复杂的轮播效果，可以考虑使用第三方库如vue-awesome-swiper。

安装依赖：

npm install swiper vue-awesome-swiper --save

代码示例：

<template>
  <swiper :options="swiperOption" direction="vertical" class="vertical-slider">
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      swiperOption: {
        direction: 'vertical',
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        loop: true,
      },
    };
  },
};
</script>

<style>
.vertical-slider {
  height: 200px;
}

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

方法四：自定义指令实现轮播

通过自定义指令实现上下轮播，适合需要高度定制的场景。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
    };
  },
  directives: {
    slider: {
      inserted(el, binding) {
        const items = binding.value.items;
        const interval = binding.value.interval || 2000;
        let currentIndex = 0;
        const slideHeight = el.querySelector('.slide').offsetHeight;

        setInterval(() => {
          currentIndex = (currentIndex + 1) % items.length;
          el.style.transform = `translateY(-${currentIndex * slideHeight}px)`;
          el.style.transition = 'transform 0.5s ease';
        }, interval);
      },
    },
  },
};
</script>

<style>
.slider-container {
  height: 50px;
  overflow: hidden;
}

.slide {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

以上方法提供了多种实现上下轮播的方式，可以根据项目需求选择最适合的方案。