H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue router中使用swiper插件提示swiperAnimateCache is not defined

现在我想在vue-router项目中使用swiper动画插件,页面元素结构如下:

clipboard.png
swiper的JS,CSS文件已经引入:

clipboard.png

clipboard.png

但是现在初始化swiper可以,但是动画效果却没有,一直报错:

swiperAnimateCache is not defined
出现这样的问题是什么原因呢,该怎么处理

回答:

找到了解决方式:执行命令安装script-loader插件,npm install –save-dev script-loader
在webpack.base.conf.js里module的roles里增加配置:
{
test: /.exec.js$/,
use: [ ‘script-loader’ ]
}
然后在组件里引用:
import swiper from ‘script-loader!assets/js/swiper/swiper.min.js’
import animate from ‘script-loader!assets/js/swiper/swiper.animate.min.js’

clipboard.png
动画的样式文件引用方式不变

回答:

<template>
<div class="culture">
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>
      <div class="title ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">11111</div>
      <div class="text ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">111111</div>
      <div class="pics ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">1111111</div>
    </swiper-slide>
    <swiper-slide>
      <div class="title ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div>
      <div class="text ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div>
      <div class="pics ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div>
    </swiper-slide>
    <swiper-slide>
      <div class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div>
      <div class="text ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div>
      <div class="pics ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div>
    </swiper-slide>
  </swiper>
</div>
</template>

<script>
import * as swiperAni from '@/common/js/swiper.animate.min.js'

export default {
  name: 'culture',
  data() {
    return {
      swiperOption: {
        // loop: true,
        effect: 'fade',
        // 变手势
        grabCursor: true,
        initialSlide: 0,
        // 滑动方向,水平horizontal,垂直vertical
        direction: 'vertical',
        on: {
          init: function () {
            swiperAni.swiperAnimateCache(this)
            swiperAni.swiperAnimate(this)
          },
          slideChange: function () {
            swiperAni.swiperAnimate(this)
          }
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>

写给后来者,这样可以用~
我使用的是 vue-awesome-swiper,因为官方swiper.animate.min.js不支持 AMD/CMD/UMD 用法,所以进行了手动修改。
水平有限,代码卖相不太好,仅供参考。

segmentfault 回答不支持上传文件,修改后的swiper.animate.min.js文件可以在 这里 下载。

Github相关issues-传送门

回答:

swiper animate 好像是是 swiper 中文网出的,这里是要看源代码,是否支持 AMD/CMD/UMD 用法,否则就需要手动修改了

回答:

请问你的解决了吗,我也是在vue中初始化正常,但是懂一直提示swiperAnimateCache未定义.

回答:

没这么复杂,把swiper.animate1.0.2.min.js放到引入的第一个文件就行了,
就是说
<script src=”js/swiper.animate1.0.2.min.js”></script>
<script src=”js/swiper.min.js”></script>
顺序问题

本文地址:H5W3 » vue router中使用swiper插件提示swiperAnimateCache is not defined

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址