vue轮播图插件vue-awesome-swiper及其常⽤属性
什么是Swiper？
Swiper是纯javascript打造的滑动特效插件，⾯向⼿机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常⽤效果。常⽤于移动端内容触摸滑动。
兼容问题：低版本的iOS只⽀持swiper3及以下
官⽹：
使⽤
在github上到⼀款专门为vue开发的版本：
1. 安装（引⼊）
1. NPM
npm install vue-awesome-swiper --save
2. 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>
rotate属性<script type="text/javascript">
Vue.use(window.VueAwesomeSwiper)
</script>
3. 在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 } */)
4. 在组件⾥引⼊
// 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.$Swiper.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关键词。
以下⼀张图来概括：
配置组件（常⽤）
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切换。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论