Vue中使用swiper animate的爬坑(附赠修改后的js)

修改后的js文件地址:https://download.csdn.net/download/virinko/12088882

业务需求:做个整屏滚动的活动页,每屏都是带动画的

我一开始有两个方案,一个是用vue-fullpage,一个是用swiper

两个方案分别有坑,这里先写swiper的

整个页面是用Swiper的整屏滚动,加上swiper animate来做的

Vue中使用swiper animate的爬坑(附赠修改后的js)_第1张图片

swiper animate的动画是这样子写的,为什么我要用swiper animate呢,因我发现自己手写的animation动画,opacity的变化总是会会有第一帧闪一下的bug(暂时未找到解决原因,如果有知道的朋友也可以告诉我)

写完活动页后在本地运行没有任何问题,但是在编译打包的时候,问题就出来了

--------------------------------------------------------------------------------------------------------------------------

首先使用swiper-animate需要引入两个文件:animate.min.css、swiper.animate.min.js

这两个文件可以在官网去下载,网上也是有的,就不必给链接了

最开始我在本地运行的时候是在html中将这两个文件以标签的形式引入,等到本地开发完毕后准备编译扔到服务器的时候发现

哦吼,没有用哦,报错哦,undefined哦

然后css的文件在mian.js中以import方式引入

那么JS文件呢,这样引入是没有用的

且官网的js文件无论怎么引总是报错,后来我查了下是swiper.animate.min.js因为不支持 AMD/CMD/UMD 用法,需要手动修改

传送门:https://segmentfault.com/q/1010000009216803

在这个传送门中有位答主的答案,并附赠了他修改后js文件

下载后,我在需要用到动画的地方,引入js中的三个方法即可

但是滑动到第二屏的时候动画不动了,报错了,这个js中有个value死活找不到

就去看了下这位答主修改的源码,于是我在其中又加了一层判断,如下

我修改后的下载资源链接在文章上方(不需要积分!免费的!)

然后我在写这篇文章的时候,才发现,原来还有大佬写了执行两种动画的升级版哦

附上大佬链接:http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=328&extra=page%3D1

 

 

 

 

你可能感兴趣的:(Vue,前端)