vue-awesome-swiper最新版轮播图实战demo及参数详解⼀、安装
可以通过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,css最新
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插件的实现核⼼在于<swiper>和swiperOption：
1、要养成习惯将整个轮播部分⽤⼀个div在外部包装起来，这会避免⼀些不必要的报错；
2、<swiper>内通常由两部分：<swiper-slide>轮播元素盒⼦、指⽰器元素盒⼦(可选)；
3、swiperOption内是配置轮播插件的参数，在<swiper>上绑定option属性导⼊即可。
这样就实现简单的轮播图功能了，下⾯的效果图：
四、swiperOption参数
- ⼀般选项
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时，完全⽆法滑动。类型：num
ber 默认：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官⽹翻阅相应配置参数。以上只是部分常⽤配置参数和版本变化的讲解，仅供交流学习。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。