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未定义之类的就不说了,按提示解决就行了。
有错误欢迎批评指正,拜了个拜