vue-awesome-swiper最新版轮播图实战demo及参数详解 Vue笔记

【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-swipercnpm 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：

> 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 } } ="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%

以上是vue项目中一个轮播图组件homeSwiper.vue的完整代码。可以看到vue-awesome-swiper插件的实现核心在于和swiperOption：
1、要养成习惯将整个轮播部分用一个div在外部包装起来，这会避免一些不必要的报错；
2、内通常由两部分：轮播元素盒子、指示器元素盒子(可选)；
3、swiperOption内是配置轮播插件的参数，在上绑定option属性导入即可。
这样就实现简单的轮播图功能了，下面的效果图：

文章图片

文章图片

四、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官网翻阅相应配置参数。以上只是部分常用配置参数和版本变化的讲解，仅供交流学习。