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 swiper@4.5.1 --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组件：
<template>
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<!-- 存放具体的轮播内容 -->
<slot name="swiper"></slot>
</div>
<!-- 如果需要分页器 -->
<div v-if="setting.usePagination || true" class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div v-if="setting.useSwiperBtn || false" class="swiper-button-prev"></div>
<div v-if="setting.useSwiperBtn || false" class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div v-if="setting.useSwiperScroll || false" class="swiper-scrollbar"></div>
</div>
</template>
<script>
import { Swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
props: ["swiperSetting"],
data() {
return {
setting: {},
};
},
mounted() {
// 判断用户是否做了设置项，做了就传进来，没做的话就全部按照开发的默认配置项设置
this.setting = this.swiperSetting ? this.swiperSetting : {};
console.log(this.swiperSetting);
},
updated() {
new Swiper(".mySwiper", {
loop: this.setting.loop || true, //是否循环
spaceBetween: this.setting.spaceBetween || 30,
centeredSlides: this.setting.centeredSlides || true,
// 自动播放轮播
autoplay: {
delay: this.setting.delay || 1500,
disableOnInteraction: this.setting.disableOnInteraction || true,
},
// 左右导航
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//分页器
pagination: {
el: ".swiper-pagination",
type: this.setting.paginationType || "bullets",
},
//方向
direction: this.setting.direction || "horizontal",
//特效
effect: this.setting.effect || "slide",
//修改swiper自己或子元素时，自动初始化swiper
observer: true,
//修改swiper的父元素时，自动初始化swiper
observeParents: true,
});
},
methods: {},
};
</script>
<style scoped>
.swiper-container {
width: 740px;
height: 450px;
}
</style>
- 父组件中去使用mySwiper组件：
<template>
<div id="demo">
<MySwiper :swiperSetting="swiperSetting">
<div v-for="item in dataList" :key="item.id" class="swiper-slide" slot="swiper" >
<img :src="item.imgUrl">
</div>
</MySwiper>
</div>
</template>
<script>
import axios from "axios";
// 引入自定义的Swiper组件
import MySwiper from "./mySwiper.vue";
export default {
name: "demo",
components: {
MySwiper,
},
data() {
return {
dataList: [],
// swiper的配置项
swiperSetting:{
loop:true,//是否循环
spaceBetween:30,//slide之间设置距离
centeredSlides:true,//设定为true时，active slide会居中
delay:1500,//自动播放的时间间隔设置
usePagination:true,//是否使用分页器
useSwiperBtn:false,//是否使用左右导航按钮
useSwiperScroll:false,//是否使用滚动
disableOnInteraction:true,//用户操作swiper之后，是否禁止autoplay
paginationType:'fraction',//分页器样式类型
direction:'horizontal',//轮播方向设置
effect:'coverflow',//切换动画效果设置
}
};
},
mounted() {
this.handleGetSwiper();
console.log(this.dataList);
},
methods: {
//模拟请求的轮播接口数据
handleGetSwiper() {
this.dataList = [
{
id: new Date().getTime(),
imgUrl:
"//gw.alicdn.com/imgextra/i2/O1CN01uQSXQn1PgVKUPbnXp_!!6000000001870-0-tps-740-420.jpg_Q75.jpg",
},
{
id: new Date().getTime() + 1,
imgUrl:
"//gw.alicdn.com/imgextra/i3/O1CN0195pI9I24Uxau5s23D_!!6000000007395-0-tps-740-420.jpg_Q75.jpg",
},
{
id: new Date().getTime() + 2,
imgUrl:
"//gw.alicdn.com/imgextra/i1/O1CN01NyXBR71gZx8JEc2Ma_!!6000000004157-0-tps-740-420.jpg_Q75.jpg",
},
{
id: new Date().getTime() + 3,
imgUrl:
"//gw.alicdn.com/imgextra/i1/O1CN01AAMxzp1NvV4CV7XE1_!!6000000001632-0-tps-740-420.jpg_Q75.jpg",
},
{
id: new Date().getTime() + 4,
imgUrl:
"//gw.alicdn.com/imgextra/i4/O1CN01GNiAeO24E0wFLwrjd_!!6000000007358-0-tps-740-420.jpg_Q75.jpg",
},
];
},
},
};
</script>
<style scoped>
</style>
二次封装的Swiper加入了配置项，如果针对使用者的个人喜欢去进行配置，如果不需要做配置的话，就不需要加入swiperSetting配置，同时，对于swiperSetting设为对象的处理还有个原因，就是可以后期需要加入其他属性时，能够更容易拓展。
5、动画效果
-
使用了配置项的轮播：
使用了配置项的轮播.gif -
使用了默认配置项的轮播：
使用了默认配置项的轮播.gif
