什么是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端支持不是很友好,期待后续版本更新)