参考文档
https://swiperjs.com/vue
基础使用方法
<template>
<swiper
:modules="modules"
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
// Import Swiper styles
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y],
};
},
};
</script>
遇到的问题
1、配置navigation后,默认的上一个下一个按钮是显示在swiper内部的,现在需求是要求显示到外部,此时就需要自己手写按钮,来手动触发上一个下一个的方法,解决方案如下
<div class="btn prev" @click="toPrev"></div>
<swiper @swiper="onSwiper" @slideChange="onSlideChange"></Swiper>
<div class="btn next" @click="toNext"></div>
setup(props, ctx) {
let mySwiper = null
const onSwiper = (swiper) => {
mySwiper = swiper// 初始化swiper
};
const onSlideChange = () => {// 触发上一个下一个按钮时会触发
console.log('slide change');
};
const toNext = () => {
nextTick(() => {
mySwiper.slideNext()
})
}
const toPrev = () => {
nextTick(() => {
mySwiper.slidePrev()
})
}
}
2、swiper在使用静态数据时,配置loog:true后可以循环播放,但是数据变成动态赋值后,无法循环播放了。
找了很久,才知道是跟swiper的渲染时机有关系,在旧版本的swiper中,可以通过配置observer、observeParents属性为true来监听swiper本身或者是父级元素发生变化时,更新Swiper 并触发 observerUpdate 事件。
参考文档
https://www.swiper.com.cn/api/observer/219.html
但是在swiper中尝试了一下,无法配置这两个属性,也可能是自己没配置对。最后都打算放弃使用swiper了,看到一篇文章,是通过v-if来控制swiper的显示时机,从而来让swiper在有数据的情况下在渲染,就可以解决无法循环播放的问题了,代码如下
<swiper
v-if="sliders.length > 0"
<Swiper>
3、在slider个数过少的时候,可能会需要禁止鼠标能拖动swiper,此时可以通过动态给swiper容器添加swiper-no-swiping类名来实现
<swiper
:modules="modules"
:class="disabled?'swiper-no-swiping': ''"
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
完善中……