什么是Swiper？
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。常用于移动端内容触摸滑动。
兼容问题：低版本的iOS只支持swiper3及以下
使用
在github上找到一款专门为vue开发的版本：Vue-Awesome-Swiper
1. 安装（引入）
-
NPM
npm install vue-awesome-swiper --save
-
CDN
<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/> <script type="text/javascript" src="path/to/swiper.js"></script> <script type="text/javascript" src="path/to/vue.min.js"></script> <script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script> <script type="text/javascript"> Vue.use(window.VueAwesomeSwiper) </script> -
在main.js里全局挂载
如果项目里很多地方用到这个组件，选用这个方式。免得每个页面都需要引入import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */) -
在组件里引入
// require styles import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
2. 应用（以在SPA单页面为例）
新建一个.vue文件，按照以下代码模式配置
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
举个例子：
<template>
<swiper class="banner" :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="(item, index) in banners" :key="index">
<img :src="item.picUrl" alt />
</swiper-slide>
<!-- Optional controls -->
<!-- 为了显示底部原点分页器 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
swiper,
swiperSlide
},
props: {
banners: {
type: Array,
default: []
}
},
data() {
return {
swiperOption: {
slidesPerView: 1, // 定义slides的数量多少为一组
spaceBetween: 30, // 在slide之间设置距离（单位px）
mousewheel: true, // 开启鼠标滚轮控制Swiper切换
loop: true, // 是否循环
autoplay: true, // 是否自动切换
pagination: { // 控制分页器
el: ".swiper-pagination",
clickable: true // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
}
}
};
},
mounted() {
setInterval(() => {
console.log("simulate async data");
if (this.banners.length < 8) {
this.banners.push(this.banners.length + 1);
}
}, 3000);
}
};
</script>
<style lang='less' scoped>
@import "../../css/index.less";
@import "~swiper/dist/css/swiper.css";
.banner {
width: 100%;
height: 1.5rem;
img {
width: 100%;
height: 1.5rem;
}
}
</style>
注意：Swiper5的API变化
Swiper5 对比Swiper4 的API并无太大变化。Swiper5 增加了CSS模式（cssMode），并且可以通过CSS文件修改Swiper颜色风格。
Swiper4 对比Swiper3 有以下不同:
Swiper4 将组件的相关选项整合起来了，并且修改了回调函数获取swiper 实例的方式为this关键词。
以下一张图来概括：
配置组件（常用）官方API文档
autoplay: {
delay: 3000, //自动切换的时间间隔，单位ms
stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）
disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
reverseDirection: true, //开启反向自动轮播。
waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
}
slide的切换效果，默认为"slide"（位移切换），可设置为’slide’（普通切换、默认）,“fade”（淡入）“cube”（方块）“coverflow”（3d流）“flip”（3d翻转）。
- fadeEffect
effect : 'fade', fadeEffect: { crossFade: true, //默认：false。关闭淡出。 } - cubeEffect
effect : 'cube', cubeEffect: { slideShadows: true, //开启slide阴影。默认 true。 shadow: true, //开启投影。默认 true。 shadowOffset: 100, //投影距离。默认 20，单位px。 shadowScale: 0.6 //投影缩放比例。默认0.94。 }, - overflowEffect
cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式effect : 'coverflow', slidesPerView: 3, //设置slider容器能够同时显示的slides数量(carousel模式)。 centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。 coverflowEffect: { rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。 stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。 depth: 60, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。 modifier: 2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。 slideShadows : true //开启slide阴影。默认 true。 }, - flipEffect
3d翻转effect : 'flip', flipEffect: { slideShadows : true, //slides的阴影。默认true。 limitRotation : true, //限制最大旋转角度为180度，默认true。 }
使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。
swiper5新增可以通过设置Swiper的风格–swiper-theme-color或单独设置分页器风格–swiper-pagination-color来改变分页器颜色。
pagination: {
el: '.swiper-pagination', //分页器容器的css选择器或HTML标签。
type: 'bullets', //分页器样式类型，可选。
//type: 'fraction',
//type : 'progressbar',
//type : 'custom',
progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反
bulletElement : 'li', //设定分页器指示器（小点）的HTML标签。
dynamicBullets: true, //动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
dynamicMainBullets: 2, //动态分页器的主指示点的数量
hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
},
使用前进后退按钮来控制Swiper切换。
navigation: {
nextEl: '.swiper-button-next', //设置前进按钮的css选择器或HTML元素。
prevEl: '.swiper-button-prev', //设置后退按钮的css选择器或HTML元素。
hideOnClick: true, //点击slide时显示/隐藏按钮。BUG处理：如果遇到无效，可增加样式 .swiper-container .swiper-button-hidden{ opacity : 0; }
disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
},
为Swiper增加滚动条。
scrollbar: {
el: '.swiper-scrollbar', //Scrollbar容器的css选择器或HTML元素。
hide: true, //滚动条是否自动隐藏。默认：false，不会自动隐藏。
draggable: true, //该参数设置为true时允许拖动滚动条。
snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。
dragSize: 30, //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。
},
设置开启键盘来控制Swiper切换。
keyboard: {
enabled: true, //开启后可以使用键盘切换。
onlyInViewport: true, //默认仅控制当前窗口内的swiper切换。当swiper离开可视区域则无法切换。
},
开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
mousewheel: {
forceToAxis: true, //当值为true让鼠标滚轮固定于轴向。
releaseOnEdges: true, //如果开启这个参数，当Swiper处于边缘位置时（第一个或最后一个slide），Swiper释放鼠标滚轮事件，鼠标可以控制页面滚动。
invert: true, //这个参数会使鼠标滚轮控制方向反转。
sensitivity : 0.1, //鼠标滚轮的灵敏度，值越大鼠标滚轮滚动时swiper位移越大。
eventsTarged: '#my-handle', //鼠标滚轮事件的接收目标(handle)，可以是css选择器或者HTML元素。
// eventsTarged: 'body', 鼠标在页面中任意地方都可控制swiper
}
开启焦距功能：双击slide会放大/缩小，并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。
需要在slide中增加类名swiper-zoom-container，结构如下：
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="path/to/image">
</div>
</div>
zoom: {
maxRatio: 5, //最大缩放焦距（放大倍率）。
minRatio: 2, //最小缩放焦距（缩小倍率）。
toggle: false, //是否允许双击缩放。设置为false，不允许双击缩放，只允许手机端触摸缩放。
containerClass: 'my-zoom-container', //zoom container 类名
},
thumbs组件专门用于制作带缩略图的swiper，比使用controller组件更为简便，且在loop状态下更友好。
thumbs: {
swiper: { //设置作为缩略图的swiper对象。
el: '#thumbs',
spaceBetween: 10,
slidesPerView: 4,
watchSlidesVisibility: true,/*避免出现bug*/
},
slideThumbActiveClass: 'my-slide-thumb-active', //设置缩略图Swiper的活动块的附加类名。
thumbsContainerClass: 'my-container-thumbs', //设置缩略图Swiper的container的附加类名。
}
其他
vue-awesome-swiper 在编译之后100多k，可能我们开发中只需要一个简单的轮播图插件，不需要这么复杂的功能。这时候可以使用一个更轻量高效的vue插件：vue-swiper（但对pc端支持不是很友好，期待后续版本更新）
