vue2中使用低版本swiper

1. 安装

npm install swiper vue-awesome-swiper@4.1.1 -S

2. 在main.js文件中引入swiper

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/css/swiper.min.css"
Vue.use(VueAwesomeSwiper)

3. 在组件中使用

<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] 等不用单独配置。