- 安装
npm install swiper vue-awesome-swiper@4.1.1 -S
- 在main.js文件中引入swiper
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/css/swiper.min.css"
Vue.use(VueAwesomeSwiper)
- 在组件中使用
<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
slide 1
</div>
<div class="swiper-slide slide2">
slide 2
</div>
<div class="swiper-slide slide3">
slide 3
</div>
</div>
<div class="swiper-pagination" slot="pagination"></div>
</div>
</template>
<script>
export default {
data () {
return {
swiperOption: {
direction: "vertical", //滑动方向 垂直
effect: 'fade',//切换效果 默认为"slide"
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
slideChangeTransitionEnd: function () {
// this.activeIndex 是索引index,这个用this才可以获取到
console.log(this.activeIndex);
},
},
},
};
},
mounted () {
this.mySwiper.slideTo(0, 1000, false);
},
};
</script>
<style lang="less" scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
.swiper-slide {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.slide1 {
background-color: white;
}
.slide2 {
background-color: #4390ee;
}
.slide3 {
background-color: orange;
}
}
</style>
效果:
4. 使用Swiper Animate添加动画,官网介绍
首先我们需要两个文件:animate.css 和 swiper.animate.min.js
<4.1> 安装animate.css
npm install animate.css@3.7 -S
<4.2> 在main.js中引入animate.css
import animated from "animate.css"
Vue.use(animated)
<4.3> swiper.animate.min.js 需要从官网下载,将下载好的文件放到项目的静态资源目录 assets/js 中,文件需要处理之后才能使用,修改后的文件:
export function swiperAnimateCache() {
const allBoxes = window.document.documentElement.querySelectorAll('.ani')
for (var i = 0; i < allBoxes.length; i++) {
allBoxes[i].attributes['style']
? allBoxes[i].setAttribute('swiper-animate-style-cache', allBoxes[i].attributes['style'].value)
: allBoxes[i].setAttribute('swiper-animate-style-cache', ' ')
allBoxes[i].style.visibility = 'hidden'
}
}
export function swiperAnimate(a) {
clearSwiperAnimate()
var b = a.slides[a.activeIndex].querySelectorAll('.ani')
for (var i = 0; i < b.length; i++) {
b[i].style.visibility = 'visible'
const effect = b[i].attributes['swiper-animate-effect']
? b[i].attributes['swiper-animate-effect'].value
: ''
b[i].className = b[i].className + ' ' + effect + ' ' + 'animated'
const duration = b[i].attributes['swiper-animate-duration']
? b[i].attributes['swiper-animate-duration'].value
: ''
// duration && style
const delay = b[i].attributes['swiper-animate-delay']
? b[i].attributes['swiper-animate-delay'].value
: ''
const style = b[i].attributes['style'].value + 'animation-duration:' + duration + ';-webkit-animation-duration:' + duration + ';' + 'animation-delay:' + delay + ';-webkit-animation-delay:' + delay + ';'
// delay && (style = style )
b[i].setAttribute('style', style)
}
}
export function clearSwiperAnimate() {
var allBoxes = window.document.documentElement.querySelectorAll('.ani')
for (var i = 0; i < allBoxes.length; i++) {
allBoxes[i].attributes['swiper-animate-style-cache'] && allBoxes[i].setAttribute('style', allBoxes[i].attributes['swiper-animate-style-cache'].value)
allBoxes[i].style.visibility = 'hidden'
allBoxes[i].className = allBoxes[i].className.replace('animated', ' ')
const effectValue = allBoxes[i].attributes['swiper-animate-effect'].value
/* eslint-disable-next-line */
allBoxes[i].attributes['swiper-animate-effect'] && (effectValue, allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '))
}
}
<4.4> 在main.js中引入并挂载到Vue原型上
import { swiperAnimateCache, swiperAnimate, clearSwiperAnimate } from "@/assets/js/swiper.animate1.0.3.min.js"
Vue.prototype.$swiperAnimateCache = swiperAnimateCache
Vue.prototype.$swiperAnimate = swiperAnimate
Vue.prototype.$clearSwiperAnimate = clearSwiperAnimate
<4.5> 在组件中配置使用
<script>
export default {
data () {
let that = this;
return {
swiperOption: {
direction: "vertical", //滑动方向 垂直
effect: 'fade',//切换效果 默认为"slide"
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
init: function () {
that.$swiperAnimateCache(this); //隐藏动画元素
that.$swiperAnimate(this); //初始化完成开始动画
},
slideChange: function () {
that.$swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//that.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名
},
slideChangeTransitionEnd: function () {
// this.activeIndex 是索引index,这个用this才可以获取到
console.log(this.activeIndex);
},
},
},
};
},
mounted () {
this.mySwiper.slideTo(0, 1000, false);
},
};
</script>
需要添加动画的标签上增加类名‘ani’
swiper-animate-effect:切换效果,例如 fadeInUp
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s
<div class="swiper-slide slide1">
<p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0s">slide 1</p>
</div>
个人记录:相对于vue-cli2.9.3之前的版本创建的项目的使用方法上有一些些的区别,在main.js中 [Pagination] 等不用单独配置。