vue3引入swiper6

第一步，安裝

npm install swiper@6

我是直接去配置里面寫的，然后install的，嘿嘿

 

 第二步，引入與使用

我想要實現的是一個縮略圖，我認為極具參考價值，那些基本的，刪刪減減就出來了

 

 

 

template部分

<swiper class="sw" :modules="[Thumbs]" :thumbs="{ swiper: thumbsSwiper }">
      <swiper-slide>11111</swiper-slide>
      <swiper-slide>2222</swiper-slide>
      <swiper-slide>33333</swiper-slide>
      <swiper-slide>44444</swiper-slide>
      <swiper-slide>555555</swiper-slide>
    </swiper>
    <swiper
      class="sw1"
      :modules="[Thumbs]"
      watch-slides-progress
      @swiper="setThumbsSwiper"
      :slides-per-view="3"
    >
      <swiper-slide>11111</swiper-slide>
      <swiper-slide>2222</swiper-slide>
      <swiper-slide>33333</swiper-slide>
      <swiper-slide>44444</swiper-slide>
      <swiper-slide>55555</swiper-slide>
    </swiper>

script部分

import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
import SwiperCore, { Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
SwiperCore.use([Thumbs]);

export default {
  name: "Home",
  components: {
    HelloWorld,
    Swiper,
    SwiperSlide,
  },
  setup() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };
    // 將swiper_options返回給模板中的swiper組件使用
    return {
      Thumbs,
      thumbsSwiper,
      setThumbsSwiper,
    };
  },
};

樣式表就自己隨便來了吧

我認為有這么幾個關鍵的點

1，這個的配置參數是要分開寫在template里面的

2，需要使用的附加模塊需要自己導入，就是上面swiperCore引入的東西

3，配置參數也可以整理到setup里面，這樣規范好看點

https://swiperjs.com/vue#usage

這是官方文檔，不要照抄，看看具體是什么版本，我使用的是swiper6這個文檔是swiper7的，很離譜，大概猜出來就行了，后面在研究吧，太困了

補充：私人定制切換按鈕

研究了半天文檔的swiper.slideNext(speed, runCallbacks)這個方法，慢慢摸索出來的

dom結構

 

 script

 

 這樣就能跑起來了，也不知道正確不正確，反正能用，哈哈哈哈哈哈哈