vue-cli3、swiper、swiper.animate配合使用

1.swiper安装使用

1.1下载swiper

cnpm install swiper --save-dev

1.2引入、使用swiper

引入可以在main.js中引入或者在使用的页面引入，一般如果多个页面使用swiper的时候选择在main.js全局引入。

1.2.1全局引入

1、main.js中引入

//1、main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'Vue.config.productionTip = falsenew Vue({
    router,store,render: h => h(App)
}).$mount('#app')

2、使用

<template><div class="about"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div>--></div></div>
</template><script>import Swiper from 'swiper'export default {
     name:'Home',data(){
     return {
     }},mounted() {
     new Swiper ('.swiper-container', {
     loop: true,// 如果需要分页器pagination: '.swiper-pagination',// 如果需要前进后退按钮nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',// 如果需要滚动条// scrollbar: '.swiper-scrollbar',//如果需要自动切换海报// autoplay: {
     // delay: 1000,//时间 毫秒// disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true// },})}} </script><style lang="less" scoped> .swiper-container{
     height: 500px;width: 100%;.swiper-wrapper{
     .swiper-slide{
     width: 100%;height: 100%;background-color: #42b983;text-align: center;line-height: 500px;}} } </style>

1.2.2组件中引入

<template><div class="hello"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slide1</div></div></div></div>
</template><script> import Swiper from "swiper" import 'swiper/swiper.scss';export default {
     name: 'HelloWorld',components: {
     },data() {
     return {
     }},mounted() {
     new Swiper('.swiper-container', {
     loop: false, // 循环模式选项speed: 1000,direction: 'vertical',})}, } </script>

2.使用swiper.animate实现轮播切换后执行动画

1、安装animate.css
cnpm i animate.css@3.x --save
注意animate.css版本，4.x版本和之前版本写法不一样，我这里用的是3.x版本。如使用4.x版本可自行查看官方文档。
2、引入animate.js
在项目中新建一个animate.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 && styleconst 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, ' '))}
}

3、全局引入animate.css
main.js

import {
     createApp } from 'vue'
import App from './App.vue'
// rem h5 适配
import 'amfe-flexible'
import 'animate.css'
createApp(App).mount('#app')

4、swiper中使用动画
给使用动画的块级标签添加类名ani,属性添加
swiper-animate-effect="bounceInDown"动画类型
swiper-animate-duration="1s"动画持续时长
swiper-animate-delay="0s"动画延迟时长
更多用法和动画类型请参照swiper官网
https://www.swiper.com.cn/usage/animate/index.html

<template><div class="hello"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide bg1"><div class="ani item1 "swiper-animate-effect="bounceInDown"swiper-animate-duration="1s"swiper-animate-delay="0s">slide1</div></div></div></div></div>
</template><script> import Swiper from "swiper" import * as swiperAni from '@/assets/js/animate.js'import 'swiper/swiper.scss'; export default {
     name: 'HelloWorld',components: {
     },data() {
     return {
     }},mounted() {
     new Swiper('.swiper-container', {
     loop: false, // 循环模式选项speed: 1000,direction: 'vertical',on: {
     init: function () {
     swiperAni.swiperAnimateCache(this); //隐藏动画元素 swiperAni.swiperAnimate(this); //初始化完成开始动画},slideChangeTransitionStart: function () {
     swiperAni.swiperAnimate(this); //每个slide开始切换时也运行当前slide动画//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名}}})}, } </script>

3.vue-awesome-swiper安装使用

1、安装
注意版本

cnpm i vue-awesome-swiper@3 --save-devcnpm i swiper@3 --save-dev

2、局部使用

<template><div class="recommendPage"><swiper :options="swiperOption" ref="mySwiper"><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><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></swiper></div>
</template><script> // 引入插件 import {
      swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css";export default {
     name: 'Home',components: {
     swiper,swiperSlide},data() {
     return {
     swiperOption: {
     loop: true,autoplay: {
     delay: 3000,stopOnLastSlide: false,disableOnInteraction: false},// 显示分页pagination: {
     el: ".swiper-pagination",clickable: true //允许分页点击跳转},// 设置点击箭头navigation: {
     nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"}}};},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><style scoped>.recommendPage .swiper-container{
     position: relative;width: 100%;height: 200px;background: pink;}.recommendPage .swiper-container .swiper-slide{
     width: 100%;line-height: 200px;background: yellowgreen;color: #000;font-size: 16px;text-align: center;} </style>

4.vue-awesome-swiper中使用animate

1、安装
npm install animate.css --save

2、下载animate.js包
打开链接： https://www.swiper.com.cn/download/index.html#file8，
下载“swiper.animate1.0.3.min.js”，
放到“assets/js/swiper.animate1.0.3.min.js”目录下
该文件需修改适应es6，
并添加代码行：
export {swiperAnimateCache,swiperAnimate};

3、main.js引入animate.js
import 'animate.css'

4、组件中使用

<template><div class="recommendPage"><swiper :options="swiperOption" ref="mySwiper"><swiper-slide><div class="ani"swiper-animate-effect="bounceInDown"swiper-animate-duration="1s"swiper-animate-delay="0s">slide1</div></swiper-slide><swiper-slide><div class="ani"swiper-animate-effect="bounceInDown"swiper-animate-duration="1s"swiper-animate-delay="0s">slide2</div></swiper-slide><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></swiper></div>
</template><script> // 引入插件 import {
      swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; import {
     swiperAnimateCache,swiperAnimate} from "@/assets/js/swiper.animate1.0.3.min.js"export default {
     name: 'Home',components: {
     swiper,swiperSlide},data() {
     return {
     swiperOption: {
     loop: true,autoplay: {
     delay: 3000,stopOnLastSlide: false,disableOnInteraction: false},// 显示分页pagination: {
     el: ".swiper-pagination",clickable: true //允许分页点击跳转},// 设置点击箭头navigation: {
     nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"},on:{
     init:function(){
     swiperAnimateCache(this);swiperAnimate(this);},slideChangeTransitionStart:function(){
     },slideChangeTransitionEnd:function(){
     },slideChange:function(){
     swiperAnimate(this);},}, }};},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><style scoped>.recommendPage .swiper-container{
     position: relative;width: 100%;height: 200px;background: pink;}.recommendPage .swiper-container .swiper-slide{
     width: 100%;line-height: 200px;background: yellowgreen;color: #000;font-size: 16px;text-align: center;} </style>