关于swiper组件 $swiperAnimateCache is not a function错误

java_jzy

已于 2022-11-19 16:32:39 修改

阅读量679

点赞数 1

文章标签：前端 javascript 开发语言

于 2022-11-19 16:21:41 首次发布

原文链接：https://www.jianshu.com/p/6016d42c29cc

版权

最近要做一个公司首页的轮播图,要求轮播图里的文字也要有动画特效,经翻阅资料后用的swiper中文网里的Swiper Animate,但是使用会发现报 $swiperAnimateCache is not a function,翻阅了好多自己都没尝试直接搬运别人代码的文章,干的我是头都大,

最后在一一篇文章中发现了解决方法,现分享出来

声明,本人用的是一下版本(据说版本问题也会引起报错)

swiper.animate1.0.3.min.js

vue-awesome-swiper.js 版本是4.1.1

swiper.js 与css 版本 4.5.3

 <!--轮播图 -->
            <div class="carousel" style="width: 100%;height: 100%;">
                <swiper ref="swiper" :options="swiperOption"  style="height:600px">
                    <swiper-slide class="swiper-item" v-for="item in carouselItems"             :key="item.id"  style="position: relative">
                        <div  class="swiper-wrapper" v-bind:style='{"background-image":"url("+item.iconurl+")"}' style="background-size:cover;">
                            <div class="carousel-font">
<!-- 必须要给添加动画的标签 赋ani类名 后面那仨分别是控制动画特效,动画动画持续时间,动画延迟时间-->
                                <div class="carousel_title ani " swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                                    {{item.title}}
                                </div>
                                <div class="carousel_subtitle" >
                                    {{item.subtitle}}
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>

 <script>

        axios.interceptors.response.use(res => res.data)
        Vue.prototype.axios=axios
        Vue.prototype.moment=moment
        Vue.use(window.VueAwesomeSwiper)
        new Vue({
            el:"#app",
            data(){
                let that =this
                return {
                     
                    carouselItems:[],//此为轮播图数组
                    swiperOption: {
                        speed:4000,//效果切换速度
                        loop:false,
                        effect:"fade",//效果属性
                        fadeEffect: {
                            crossFade: true,
                        }, //防止内容的重叠
                        autoplay:{
                            disableOnInteraction: false
                        },
                        on:{   //以下为重点
                            init(){
                                // swiperAnimateCache(this); //隐藏动画元素
                                that.showSection = this.realIndex
                                // swiperAnimate(this); //初始化完成开始动画
                            },
                            slideChangeTransitionStart:function (){

                            },
                            slideChangeTransitionEnd: function(){
                                that.showSection = this.realIndex
                                // swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                                //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                            },
                            slideChange:function (){
                                swiperAnimate(this)
                            },
                        }
                    },
                    
                }
            },    
        })
    </script>

转载:vue swiper animate踩坑总结 - 简书

感觉swiper坑还是挺多的,各种冲突,其他问题可私信我