最新swiper使用记录
swiper中文API
swiper英文版API 建议看此API
"vue": "^3.2.37"
"swiper": "8.3.2"
安装
npm i swiper
- 在组件中导入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])
- 在模板中使用
<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>
- 部分参数说明:
:slidesPerView="1" //每页显示几个
:spaceBetween="30" //每个间距是多少
:loop="true" //循环滚动
:centeredSlides="true" //值为【false】时左对齐,默认就是左对齐,值为【true】时居中对齐
:pagination="{
clickable: true,
}"//点击分页圆点是否切换
:autoplay="{
delay: 1000,
disableOnInteraction: false,
}"//设置多少毫秒会执行一次动画(可以理解为:翻页 / 切换)
:navigation="true" //左右切换箭头 - 自定义箭头(注意点)
通过使用以下导入并且使用
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()
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。