nuxt中使用swiper+animate

nuxt.js中使用swiper+animate出现的一些问题及解决

主要解决的问题有：

1.nuxt项目中swiper的引入使用，如何搭配animate做出切换轮播展示动画效果
2.使用swiper中文网提供的插件swiper.animate.js出现报错 swiperAnimateCache is not defined的解决

1.nuxt项目中swiper的引入使用

首先，nuxt是基于vue2.x的，所以我引入的是vue版本的swiper插件：vue-awesome-swiper
使用专用的插件可以让我们使用vue的语法来加载（绑定轮播对象是使用v-swiper的形式），比较贴合开发习惯,另外，Swiper发布了新的针对vue的，Swiper Vue组件，这是一个TypeScript友好的项目，而vue-awesome-swiper将被弃用，如果你追求更好的稳定性，或者是使用TS开发，可以移步https://swiperjs.com/vue查看该组件的使用方法。

我使用yarn 命令管理包，所以运行以下命令安装插件：

yarn add vue-awesome-swiper@3 --save

这里有一点需要注意，我使用的是3.x版本的，对应swiper4.x，因为我是想搭配swiper.animate.js实现轮播图切换动画效果，而swiper中文网提供的demo中使用的swiper.min.js版本为4.4.1，建议保持一致，以免插件不兼容导致出现问题。

在nuxt中使用插件需要在plugins文件夹下创建swiper.js文件，引入插件并用Vue.use()方法使用，如下：

//@plugins/swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

创建完插件文件后需要在nuxt.config.js中配置插件及css样式文件，如下

 css: [
        'swiper/dist/css/swiper.min.css',
    ],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        {
            src: '@/plugins/swiper',
            ssr: false
        },
    ],

这样我们就可以使用了

//template
 <div v-swiper:mySwiper="swiperOption" class="swiper-container">
	 <div class="swiper-wrapper">
 		<div class="page1 swiper-slide">1 </div>
		 <div class="page1 swiper-slide">2 </div>
 		 <div class="page1 swiper-slide">3 </div>
 		 <div class="page1 swiper-slide">4 </div>
     </div>
 </div>
 //script
 data() {
    return {
      swiperOption: {
        // loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 0,
        //direction: 'vertical',//方向纵向，默认横向
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
        },
        // autoplay: true, // 自动切换
        mousewheel: true, // 支持滚轮切换
        // 其他效果可参考官网https://www.swiper.com.cn/api/navigation/355.html
        // 配置导航
        navigation: {
           nextEl: '.swiper-button-next', // 下一页dom节点
           prevEl: '.swiper-button-prev', // 前一页dom节点
        },
        on: {
          slideChange() {
          //切换时触发
          //do something
          },
        },
      },
    }
  },

2.swiperAnimateCache is not defined的解决

当我们需要在轮播图切换时对内部内容添加一些动画效果时，可以使用swiper中文社区提供的插件swiper.animate.js,在swiper中文网的教程内有一篇文章介绍了使用方法，但是只有原生写法。

通过查阅网上资料可以找到在nuxt项目中的使用方法，需要下载插件文件swiper.animate1.0.3.min.js和animate.min.css，然后将文件放在static或者assets文件夹下，然后将swiper.animate.js以插件形式配置到项目中，插件文件中写法如下

//@plugins/swiper.animate.js
import '~assets/js/swiper.animate.js'

然后按照上面swiper中的配置方法将对应的文件路径加入配置文件nuxt.config.js的对应位置，这里我使用后会出现报错swiperAnimateCache is not defined，所以我并未使用这种方法，这里不再对配置进行详细介绍。另外animate.css之所以需要下载后作为静态文件引入是为了与插件版本适配，而我是使用包管理器下载，就出现了适配问题，下文会介绍我对这两个问题的解决办法

按照上述方法引入后使用：

//在上述swiper的使用中的swiperOption，在其中添加如下代码
swiperOption: {
        on: {
          init() {
            swiperAnimateCache(this) // 隐藏动画元素
            swiperAnimate(this) // 初始化完成开始动画
          },
          slideChangeTransitionEnd() {
            swiperAnimate(this)
          },
        },
      },

对加动画的的元素还要添加以下属性，在教程中有介绍

此时控制台报错：swiperAnimateCache is not defined
度娘了一下，回答有说用插件加载的，有说只是顺序问题，把他放前面加载就可以的
我看了下源码，这个插件很简单，实际上只有三个方法：
swiperAnimateCache 、swiperAnimate、clearSwiperAnimate
报错的就是其中一个，也就是我们在使用中首先会执行的swiperAnimateCache
所以我考虑不使用引入插件的方法使用他，只有三个方法，又是作为静态文件存在，我完全可以将这三个方法作为三个工具函数，在使用的地方像引入其他工具函数一样引入后使用

import {
  swiperAnimate,
  swiperAnimateCache,
} from '@/assets/js/swiper.animate'

此时已经不再报错，但是动画效果并没有。前文提到，我引入的animate.min.css是使用包管理器下载，默认为最新版本，新版本的类名加了’animate__'前缀，而旧版本的是没有的
修改swiperAnimate函数中的定义类名的代码即可使其适配，如下

//@/assets/js/swiper.animate.js中的swiperAnimate函数
 b[i].className = b[i].className + '  animate__' + effect + ' ' + 'animate__animated'

此时动画效果正常显示。

除了上述错误，我们下载的swiper.animate.min.js是一个压缩版本，另外语法也进行了简写，eslint可能会报错：Expected an assignment or function call and instead saw an expression，意思是

只要将表达式简写改为if else语句就能解决了，改写的时候注意块范围，别的var改用const、for循环i、j未定义之类的就不说了，按提示解决就行了。

有错误欢迎批评指正，拜了个拜