Vue3使用Swiper实现列表滚动屏效果

 一、vue和swiper版本

"swiper": "^8.4.7",
"vue": "^3.2.37"

二、安装swiper

npm i swiper@8.4.7

三、详细代码 

<template>
  <swiper
    style="height: 200px; width: 300px"
    :slides-per-view="5"
    :space-between="10"
    :modules="modules"
    direction="vertical"
    :loop="true"
    :autoplay="autoplayOptions"
    :scrollbar="{ draggable: false }"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

import { Autoplay, Scrollbar } from "swiper";
// Import Swiper styles
import "swiper/css";
// import "swiper/css/scrollbar";

//自动轮播的配置
const autoplayOptions = {
  delay: 1000,
  disableOnInteraction: false,
  pauseOnMouseEnter: true,
  reverseDirection: false,
};

const modules = [Autoplay, Scrollbar];
</script>

四、效果图