swiper 使用(vue3)

使用 ref 控制

useSwiper 只能在 Swiper 的子组件里使用，因为它使用了 inject，可以参考 useSwiper。

1. 导入 Controller module
2. 使用 @swiper 事件设置 ref

demo

<script setup>
import { Controller } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'

const swiperInst = ref(null)
const setSwiper = (swiper) => {
  swiperInst.value = swiper;
};
</script>
<template>
    <Swiper :modules="[Controller]" @swiper="setSwiper">
      <SwiperSlide>
        ....
      </SwiperSlide >
    </Swiper>
</template>

使用渐变效果(EffectFade)

使用任何效果都是如此，参考 swiper-effects

1. 导入 EffectFade module
2. 使用 effect='fade' 属性

<template>
    <Swiper effect="fade" :modules="[EffectFade]">
      <SwiperSlide>
        ....
      </SwiperSlide >
    </Swiper>
</template>

注意事项

Slide 如果背景是透明的话，切换时会造成重叠的问题。
这是因为 EffectFade 会修改 SwiperSlide 里的 opacity 属性，初始化时仅第一个元素 opacity 是 1，其他为 0。但是在切换后，已展示的元素 opacity 还是为 1。

解决办法

使用 patch-package 修改 EffectFade 源码，或者复制相关代码到自己的目录下。