Vue3中使用swiper8

新版swiper在vue3中使用记录

swiper中文API

swiper英文版API 建议看此API

版本：

"vue": "^3.2.37"

"swiper": "8.3.2"

1. 安装

npm i swiper

2. 在组件中导入swiper

import { Swiper, SwiperSlide } from "swiper/vue";
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const modules = [Autoplay, Pagination, Navigation, A11y];

特别说明SwiperCore需要通过它来使用暴露的属性 SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])

3. 在模板中使用

<template>
    <swiper
        :slidesPerView="1"
        :spaceBetween="30"
        :loop="true"
        :centeredSlides="true"
        :pagination="{
            clickable: true,
        }"
        :autoplay="{
            delay: 1000,
            disableOnInteraction: false,
        }"
        :navigation="true"
        :modules="modules"
        class="mySwiper"
		ref="mySwiper"
    >
        <swiper-slide v-for="(item, index) in imgList" :key="index">
        <div style="width: 100%" class="flex">
            <img
            style="width: 100%; height: 100%"
            :src="item"
            />
        </div>
        </swiper-slide>
    </swiper>
</template>
<script setup>
    // 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
    import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper';
    const modules = [Autoplay, Pagination, Navigation, A11y];
	import 'swiper/css'
    import 'swiper/css/navigation'
    // import 'swiper/css/pagination'
    // import 'swiper/css/bundle'
    const imgList = ref(['https://www.baidu.com/img/bdlogo.png'])
</script>

4. 部分参数说明：

//每页显示几个

:slidesPerView="1"

//每个间距是多少

:spaceBetween="30"

//循环滚动

:loop="true"

//值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐

:centeredSlides="true"

//点击分页圆点是否切换

:pagination="{ clickable: true, }"

//设置多少毫秒会执行一次动画（可以理解为：翻页 / 切换）

:autoplay="{ delay: 1000, disableOnInteraction: false, }"

//左右切换箭头

:navigation="true"

5. 自定义箭头（注意点）

通过以下导入并使用

import { useSwiper } from 'swiper/vue';
const swiper = useSwiper();
<button @click="swiper.slideNext()">next</button>

结果是未找到slideNext方法，大致看了下源码貌似没暴露出此方法，也或许是使用方法不对，有知道的评论留言哈

最后不在折腾，换了种方式(通过ref)能拿到对应属性

const mySwiper = ref<null | HTMLElement>(null)
// 获取swiper属性
mySwiper.value?.$el.swiper
mySwiper.value?.$el.swiper.slideNext()