Swiper轮播插件的使用与二次封装

1、Swiper

官方文档链接：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
Swiper是一个非常强大的轮播插件，Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。并且Swiper不依赖于任何框架，意味着单纯的html+css也可以去引用，jquery或是Vue等等，都可以去使用。

2、Vue中使用Swiper

建议不要直接依据官方文档的npm安装，npm i swiper --save下载下来的是默认最新的@6.6.7版本，但是这个版本貌似存在个问题，就是依赖包的文件路径和官网的说明存在差异，在6.x版本，根本没有看到dist目录，所以建议用4.x的版本，只需要在安装的时候在后面指定版本号就可以

swiper的css文件.png

1、安装swiper
npm install [email protected] --save
2、安装vue-awesome-swiper
npm install vue-awesome-swiper@3 --save-dev
3、开始引入相关依赖文件

import { Swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

4、使用
直接使用的话就非常简单，按照官网的demo去写就ok，但作为一个Vue的追随者，必然觉得有必要作为组件去封装使用，从而提升开发效率。
Swiper使用方法 - Swiper中文网

3、Swiper使用的常见问题解决方案

swiper最常见的一个问题就是swiper初始化过早的问题，这个问题带来的影响则是图片无法滚动，比如最常见的情形之一：动态渲染异步请求数据，如果swiper初始化是放在mounted生命周期中，mounted生命周期又仅会执行一次，而此时的数据列表的长度是为0的，检测方法就是去打印数组list.length，查看是否为0，如果是0，那么就需要将swiper初始化的位置进行更换

解决方案一：将swiper初始化的位置由mounted钩子函数改为updated钩子
解决方案二：给自定义的swiper组件加上一个唯一的key值

4、Vue中对Swiper的二次封装

内容区域使用的是具名插槽，匿名插槽也可以做，但是使用具名更严谨一点，使用插槽的原因是针对于不清楚使用者需要轮播的是图片，还是文字，亦或是图片加文字标题。

mySwiper.vue组件：

父组件中去使用mySwiper组件：

二次封装的Swiper加入了配置项，如果针对使用者的个人喜欢去进行配置，如果不需要做配置的话，就不需要加入swiperSetting配置，同时，对于swiperSetting设为对象的处理还有个原因，就是可以后期需要加入其他属性时，能够更容易拓展。

5、动画效果

使用了配置项的轮播：

使用了配置项的轮播.gif
使用了默认配置项的轮播：

使用了默认配置项的轮播.gif