Swiper是一个功能丰富的“滑动特效”插件：
常用的tab切换，banner切换等等，包含各种切换特效，看Demo就非常炫酷。同时，也提供了主流的框架组件版本。然而，最新版的Vue组件只支持在Vue3中使用。查找资料后实践，记录一个Vue2中的使用方式。
Swiper的官网介绍也比较清楚，英文官网中是最新的版本的内容，没有找到旧版的文档内容，中文官网可以看到旧版的文档。
一、Swiper 在Vue2 中的使用方法
最新的Swiper只支持Vue3，所以在 Vue2上要安装旧版本
第一步：npm 安装正确的版本
npm i swiper@6.8.4 vue-awesome-swiper@4.1.1
第二步：在对应的Vue页面中引用库
这里其实是使用vue-awesome-swiper库对swiper的封装
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
// 添加组件
components: {
Swiper,
SwiperSlide,
},
第三步：在页面上使用组件，并对组件添加设置，swiperOption属性设置见后文
<swiper :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
</swiper>
二、Swiper 相关参数和事件(options的配置)
相关参数和事件参考中文网站中旧版api。该文档是Swiper 4.X - 7.X 的api ，但是这里是swiper@6.8.4版本，大部分api是通用的，7上只是略有区别，看文档时注意区分即可。
注意：
该组件事件的监听有一些坑，通过监听点击某个slider事件进行说明。
监听事件可以直接写在组件的标签中，如<swiper :options="swiperOption" @tap="test">, 这样在test方法中就可以收到点击回调。然而，当我们想获取点击某个slide时，却发现在该方法中无法获取到swiper对象，进而无法使用swiper对象的activeIndex属性获取到当前点击的slide位置。
若要想获取该swiper实例，则需要将监听配置到on参数中：
swiperOption: {
on: {
// 该方法中的this都指代swiper本身
tap: function () {
console.log('点击的位置', this.activeIndex);
}
}
}
注意这里也不能写成箭头函数，会更改this的指向。
三、简单的例子：中间大两边小的轮播
效果如图：
初始加载
可设置loop属性让初始加载即两边都有slide，详见下方代码loop属性注释
滚动后
完整代码如下，主要是配置相关的样式，具体参数含义注释在代码中了：
<template>
<div>
<div class="swiper">
<swiper :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'Main',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOption: {
spaceBetween: 30,
slidesPerView: 5, // 一屏显示的slide个数
centeredSlides: true,// 居中的slide是否标记为active，默认是最左active,这样样式即可生效
slideToClickedSlide: true,// 点击的slide会居中
// loop: true,// 循环播放, 可有无限滚动效果，初始加载即是滚动后的效果
on: {
// 该方法中的this都指代swiper本身
tap: function () {
console.log('点击的位置', this.activeIndex);
}
}
},
}
},
mounted() {
},
methods: {
test(e) {
// 默认会$event对象
console.log(11,e);
}
},
}
</script>
<style lang="less" scoped>
.swiper {
width: 100%;
height: 50px;
bottom: 10px;
position: absolute;
background-color: darkred;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.5);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
background-color: aqua;
transform: scale(1);
}
</style>
参考文章：
如何正确的使用 vue-awesome-swiper 轮播组件
swiper中间大两边小的轮播图
swiper写中间大两边小的轮播图
使用swiper做的轮播图--多种效果
Vue中使用Swiper
vue 使用swiper的时候报 [Vue warn]: Failed to mount component: template or render function not d
网友评论