当前位置：首页 > VUE

vue实现竖向轮播

2026-01-19 15:22:54VUE

Vue 实现竖向轮播的方法

竖向轮播在网页设计中常用于展示新闻、公告或产品列表。以下是几种常见的实现方式：

使用 CSS 动画实现

通过 CSS 的 transform 和 transition 属性实现竖向滚动效果。定义一个固定高度的容器，内部元素通过动画向上移动。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      currentIndex: 0,
      translateY: 0
    }
  },
  mounted() {
    setInterval(this.scrollToNext, 2000)
  },
  methods: {
    scrollToNext() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
      this.translateY = -this.currentIndex * 50 // 假设每个项目高度为50px
    }
  }
}
</script>

<style>
.vertical-carousel {
  height: 50px;
  overflow: hidden;
}
.carousel-container {
  transition: transform 0.5s ease;
}
.carousel-item {
  height: 50px;
  line-height: 50px;
}
</style>

使用第三方库

Vue-Awesome-Swiper 是一个基于 Swiper 的 Vue 轮播组件，支持竖向滚动。

安装依赖：

npm install swiper vue-awesome-swiper

实现代码：

<template>
  <swiper :options="swiperOption" direction="vertical">
    <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: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      swiperOption: {
        direction: 'vertical',
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        loop: true
      }
    }
  }
}
</script>

使用 CSS Scroll Snap

现代浏览器支持 CSS Scroll Snap，可以实现平滑的滚动定位效果。

vue实现竖向轮播

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

<script>
export default {
  data() {
    return {
      items: ['Content 1', 'Content 2', 'Content 3', 'Content 4']
    }
  }
}
</script>

<style>
.scroll-container {
  height: 100px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.scroll-item {
  height: 100px;
  scroll-snap-align: start;
}
</style>