vue-awesome-swiper最新版轮播图实战demo及参数详解
vue-awesome-swiper是vue项目插件之一，用于开发轮播功能。它基于swiper轮播插件，由大牛开发而出，奉上源仓库：https://github.com/surmon-china/vue-awesome-swiper
一、安装
可以通过CDN或NPM(CNPM)安装。CDN有些繁琐，通常我们习惯npm(cnpm)下载安装：
npm install swiper vue-awesome-swiper
cnpm inatall swiper vue-awesome-swiper
二、引入
全局引入：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
组件引入：
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
建议大家习惯全局引入，插件不大，个人认为无需节省这点空间，以免开发轮播功能时缺少组件。
三、实战demo
安装引入完成后，就可以开始在对应的地方使用插件开发功能了。这里简单地做个轮播图demo：
<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="list.length"> //导入图片数据数组
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" :src="item.imgUrl"/> //循环数组轮播图片
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> //分页器
</swiper>
</div>
</template>
<script>
export default {
name:"homeSwiper",
data (){
return {
swiperOption:{ //轮播插件配置参数
pagination:{ //分页器
el:'.swiper-pagination',
clickable:true
},
loop:true, //循环
autoplay:{ //自动播放
delay:1500,
disableOnInteraction:false
},
speed:1500 //播放速度
}
}
},
props:{
list:Array
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
.wrapper
background :#eee
overflow :hidden
width :100%
height :0
padding-bottom:30.48%
.swiper-img
width:100%
</style>
以上是vue项目中一个轮播图组件homeSwiper.vue的完整代码。可以看到vue-awesome-swiper插件的实现核心在于swiperOption：
1、要养成习惯将整个轮播部分用一个div在外部包装起来，这会避免一些不必要的报错；
2、
3、swiperOption内是配置轮播插件的参数，在
这样就实现简单的轮播图功能了，下面的效果图：
四、swiperOption参数
vue-awesome-swiper插件最新版3.1.3是基于swiper4开发，所以它的swiperOption属性也和swiper4所有api属性一致。鉴于中文官网已下架swiper4手册，我们可以直接阅读swiper5手册学习api属性：https://www.swiper.com.cn/api/index.html
swiper4/5比较于swiper3最大的变化在于它将部分配置组件化，简单说以前一些配置是单值，现在成了对象。下面对一些常用配置参数简单介绍：
- 一般选项
direction： 滑动方向，可设置水平(horizontal)或垂直(vertical)。类型：string 默认：horizontal
speed： 切换速度，滑动开始到结束的时间（单位ms）。类型：number 默认：300
on： 注册事件，Swiper4/5使用关键词this指代Swiper实例。类型：object
loop： 设置为true 则开启loop模式，循环播放。类型：boolean
preventClicks： 当swiper在触摸时阻止默认事件，用于防止触摸时触发链接跳转。类型：boolean 默认：true
touchRatio： 触摸比例。默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动。类型：number 默认：1
noSwiping： 设为true时，可以在slide上（或其他元素）增加类名’swiper-no-swiping’，使该slide无法拖动，希望文字被选中时可以考虑使用。类型：boolean 默认：true
- autoplay对象
设置为true启动自动切换，并使用默认的切换设置。类型：boolean/object 默认：false
delay： 自动切换的时间间隔，单位ms。类型：number 默认：3000
stopOnLastSlide： 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。类型：boolean 默认：false
disableOnInteraction： 用户操作swiper之后，是否禁止autoplay。类型：boolean 默认：true停止。
reverseDirection： 开启反向自动轮播。类型：boolean 默认：false
- pagination对象
使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。类型：object
el： 分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外。类型：string or HTML Element 默认：null
type： ‘bullets’圆点(默认) 'fraction’分式 ‘progressbar’进度条 ‘custom’自定义
clickable： 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。类型：boolean 默认：false
hideOnClick： 默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。类型：boolean 默认：false
- navigation对象
使用前进后退按钮来控制Swiper切换。类型：object
nextEl： 设置前进按钮的css选择器或HTML元素。类型：string / HTMLElement 默认：null
prevEl： 设置后退按钮的css选择器或HTML元素。类型：string / HTMLElement 默认：null
hideOnClick： 点击slide时显示/隐藏按钮。类型：boolean 默认：false
- scrollbar对象
为Swiper增加滚动条。类型：object
el： Scrollbar容器的css选择器或HTML元素。类型：string / HTMLElement 默认：null
hide： 滚动条是否自动隐藏。默认：false，不会自动隐藏。类型：boolean 默认：true
draggable： 该参数设置为true时允许拖动滚动条。类型：boolean 默认：false
- Methods方法
swiper4/5有很多内置方法，对vue-awesome-swiper插件一样可用，这里就不一一列举了，官网手册翻阅即可。
- Properties属性
swiper4/5有很多针对swiper实例的属性，例如mySwiper.activeIndex、mySwiper.width、mySwiper.height等，官网手册翻阅即可。
五、总结
总的来说还是感谢大牛们的贡献为vue开发出实用的插件，使用方法如上并不复杂，需要什么特殊功能可以到swiper官网翻阅相应配置参数。以上只是部分常用配置参数和版本变化的讲解，仅供交流学习。