vue2中使用swiper@5.4.5以及vue3使用swiper@7
版本说明
由于当前主流仍是vue2，所以本次使用vue2版本。
在博文最后，也会说明vue3版本的使用。
由于使用swiper使用了固定的html内容，所以需要在html文件加载后，
才能使用swiper插件。
所以我们需要把配置内容，放在mounted里面：
<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
name: 'CarouselShow',
mounted() {
new Swiper('.swiper-container', {
autoplay: true,
loop: true,
// 其他配置...
})
}
}
</script>
用前准备
默认已经使用vue2创建了项目，此时需要安装一些js库：
npm i swiper@5.4.5 // 注意版本，后面会介绍为啥选5.4.5
swiper的使用方法：
https://www.swiper.com.cn/usage/index.html
使用的时候，需要从这里拿基础代码。
代码案例：
https://gitee.com/guozia007/test-swiper5.45
效果展示：
https://guozia007.gitee.io/test-swiper5.45/
swiper的api配置项:
https://www.swiper.com.cn/api/
使用swiper
此处直接在vue2给的HelloWord组件上进行修改，把原有代码都删除，换成
给定的代码，即：
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1">Slide 1</div>
<div class="swiper-slide swiper-slide2">Slide 2</div>
<div class="swiper-slide swiper-slide3">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
name: 'HelloWorld',
mounted() {
var mySwiper = new Swiper('.swiper-container', {
// config...
})
}
}
</script>
<style scoped>
.swiper-container {
width: 500px;
height: 400px;
}
.swiper-slide {
text-align: center;
line-height: 400px;
color: #b0b0b0;
}
.swiper-slide1 {
background: red;
}
.swiper-slide2 {
background: blue;
}
.swiper-slide3 {
background: yellow;
}
</style>
此时，已经能用了。
然后是各种api的配置，根据自己的需要，来选择不同的配置项。
主要配置项：
loop
无限循环，即轮播到最后一张图之后，点击按钮，是否接着轮播第一张图。
默认为false 。表示不循环，即播放了最后一张，点击按钮无效，不会去播放第一张图片。
设置为true，播放到最后一张，点击按钮后，会继续播放第一张。
loop: true,
speed
speed: 800, // 滚动一张或者切换一张图片，需要的时间，单位ms，默认300ms
pagination
设置轮播图中的小圆点
pagination: {
el: '.swiper-pagination',
},
配合着标签使用：
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
轮播的图片有几张，就会出现几个小圆点。
navigation
配置左右按钮
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next', // 右按钮
prevEl: '.swiper-button-prev', // 左按钮
},
配合标签使用：
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
effect
改变轮播图的效果
默认是一张一张的滑动轮播，
比如设置为fade时，就可以让图片变成淡入淡出的方式进行轮播。
更多值可以查看api配置项。
autoplay
配置轮播图的自动播放功能，即用户不需要点击，轮播图会自动切换图片
该属性有两种配置方式，
第一种是直接配置boolean值，即false或者true。
默认为false，即不自动播放。
如果配置为true，就会自动播放。
autoplay: true,
该配置相当于：
autoplay: {
delay: 3000, // 每次轮播间隔的ms数，默认3000ms
stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
disableOnInteraction: true, // 用户操作轮播图后，如点击轮播按钮或小圆点，永久停止轮播
}
第二种配置方法：
autoplay: {
delay: 3000, // 每次轮播间隔的ms数，默认3000ms
stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
disableOnInteraction: true, // 用户操作轮播图后，比如点击轮播按钮或小圆点，永久停止自动轮播
}
其中，
stopOnLastSlide设置为true，播放完最后一张，会停止播放
disableOnInteraction 设置为false，用户操作轮播图后，不会停止自动轮播。
即：
autoplay: {
delay: 3000, // 每次轮播间隔的ms数，默认3000ms
stopOnLastSlide: false, // 播放完最后一张图片后继续轮播
disableOnInteraction: false, // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
}
修改swiper中轮播图的样式
直接按照类名修改相应css属性即可。
比如设置宽高：
.swiper {
width: 500px;
height: 400px;
}
需要注意的是，如果原来的swiper类中，已经设置了某个属性，
但是新属性中又不需要这个属性，就可以按照下面的例子来处理：
假定原来的.swiper默认样式：
.swiper {
left: 0;
}
假定我们此时不需要这个left属性，而是我们要自己定义一个right属性：
.swiper {
left: unset;
right: 10px;
}
修改小圆点样式
如果只修改小圆点颜色的话，
可以用swiper-pagination-color: #fff;属性去修改小圆点颜色。
该属性不管style标签里有没有scoped属性，都会生效。
需要特别注意的是，在vue中，如果通过类名修改小圆点样式，
<style></style>这里面不能加scoped属性，
不然无法修改小圆点样式。
修改小圆点的样式，需要单独写一个不带scoped属性的标签。这样才能确保新样式生效。
比如就像这样：
<style lang="less" scoped>
/*这里是其他标签的样式*/
</style>
<style lang="less">
/*小圆点的样式，需要单独写一个不带scoped属性的style标签*/
.swiper-pagination-bullet {
margin-left: 5px;
&.swiper-pagination-bullet-active {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
}
</style>
分页小圆点的相关配置项：
官方文档：https://www.swiper.com.cn/api/pagination/362.html
// js配置项
注意：修改 bulletClass: 'dot'和bulletActiveClass: 'active'可能会导致小圆点不显示！！
pagination: {
el: '.swiper-pagination', // 包裹小圆点的类名，可自定义
clickable: true, // 点击小圆点，也可以滚动轮播图。默认false
type: 'bullets', // 分页器样式类型，默认bullets 圆点样式
bulletElement: 'span', // 设置小圆点的标签，默认为span
bulletClass: 'dot', // 修改小圆点类名，默认为swiper-pagination-bullet。
// 如果修改了该类名，就要自己写相应的样式了
bulletActiveClass: 'active', // 修改小圆点处于激活状态时的类名，默认为swiper-pagination-bullet-active
}
配置项在vue2中搭配$nextTick+watch使用
// 这里的new Swiper初始化必须要在list中有数据，且dom对list进行v-for循环完成后才进行，
//否则无效。所以采用watch+$nextTick处理。
// 分析：在mounted中初始化new Swiper是不行的，因为mounted执行时，只是基本dom生成完毕，
// 而异步的list数据仍未回来，且dom也仍未更新。只用watch，不用$nextTick也是不行的，
// 只用watch时，当list数据更新回来后就会执行swiper初始化，而此时页面dom还没有对
// list数据更新完成。
watch: {
list: {
immediate: false,//若为true，手动滑动轮播图时会无法滑动且不流畅
handler() {
this.$nextTick(() => {
// this.$refs.swiperContainer获得的是当前组件的swiper容器,且多个组件之间是互不影响的，如果采用
// document.querySelector等传统方式获得swiper容器class名称，就必须为swiper容器设置不同的class名
var mySwiper = new Swiper(this.$refs.swiperContainer, {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
speed: 1000, //图片切换时的运动时间
//自动播放，默认不播放
autoplay: {
delay: 2000, //图片切换的间隔时间
stopOnLastSlide: false, //停到最后一张图
disableOnInteraction: true //用户操作轮播图后，停止自动播放
},
// 如果需要分页器(小圆点)轮播的图片有几张，就会出现几个小圆点。
pagination: {
el: '.swiper-pagination',
clickable: true //点击小圆点可以切换
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar'
// }
})
})
}
}
}
配置项在非框架中使用
const mySwiper = new Swiper(this.$refs.swiperContainer, {
observer：true,//开启动态检查器，监测swiper
observerParents:true,//监测Swiper的祖/父元素
autoplay: {
delay: 2000, //图片切换的间隔时间
stopOnLastSlide: false, //停到最后一张图
disableOnInteraction: false, //用户操作轮播图后，是否永久停止自动播放
},
loop: true,
speed: 1000,
pagination: {
el: this.$refs.swiperPagination, // 包裹小圆点的类名，可自定义
clickable: true, // 点击小圆点，也可以滚动轮播图。默认false
type: 'bullets', // 分页器样式类型，默认bullets 圆点样式
bulletElement: 'span', // 设置小圆点的标签，默认为span
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
swiper7的使用
swiper7在vue3中使用。
安装：
npm i swiper
swiper7不能在vue2中使用，
原因是，在swiper源码中，引入的8个vue方法都是vue3中的方法，在vue2中不存在。
如果在vue2中使用swiper7，会报错。
另外，vue3中使用swiper7，会有路径上的坑。
比如引入时，需要自己修改引入路径，不然会报错。
依照官方文档的引入方法为：
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
而这样的引入方式，vue会报错找不到引入的模块，
解决方法是，手动修改引入路径，
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
// Import Swiper styles
import 'swiper/swiper.min.css';
AI写代码
正因为有这种坑，所以首选仍是6版本之前的swiper版本。
而6以前的最后一个稳定版本就是5.4.5版本。也无需担心这种坑的问题。
原文链接：https://blog.csdn.net/kkfake/article/details/128246098
浙公网安备 33010602011771号