vue3＜script setup＞中使用Swiper(抓手光标(190))

从 NPM 安装

我们可以从 NPM 安装 Swiper

npm install swiper

导入包含所有模块（捆绑包）的 Swiper

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/css/bundle';

初始化Swiper

import { onMounted } from 'vue'

onMounted(() => {
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 4,
    centeredSlides: true,
    spaceBetween: 30,
    grabCursor: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
})

html

 <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

css

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

Getting Started With Swiper (swiperjs.com)

Swiper演示 - Swiper中文网

swiperjs.com/demos

onMounted会在组件实例被成功挂载到DOM上后调用。这意味着，当组件的模板被渲染并添加到DOM中之后，onMounted中的代码将被执行。在这个阶段，可以安全地访问和操作DOM元素，执行数据请求等副作用操作。