vue使用swiper轮播图报错TypeError: Cannot read property ‘autoplay‘ of undefined-解决方案
发现很多小伙伴用vue swiper相关的插件时,当我们想使用鼠标移入移出的时候,如:this.$refs.mySwiper.autoplay.start(),this.$refs.mySwiper.autoplay.stop(),却发现报了这个错误:typeError: Cannot read property ‘autoplay’ of undefinedswiper官网没有详细的说明,自行测
·
发现很多小伙伴用vue swiper相关的插件时,当我们想监听鼠标移入移出的时候,
使用了网上别人写的这些方法:this.$refs.mySwiper.autoplay.start()
,this.$refs.mySwiper.autoplay.stop()
,却发现报了这个错误:typeError: Cannot read property ‘autoplay’ of undefined
然而swiper官网没有详细的说明,自行测试后发现这个是版本问题,
先查看自己的版本是多少,我的当前版本 “vue-awesome-swiper”: “^4.1.1”,
ok,我们可以打印一下,this.$refs.mySwiper 看看… 找到这个 ** $swiper或者swiperInstance**对象…
使用方式:
//组件:
swiper(:options="swiperOption" @mouseenter.native="onSwiperEnter" @mouseleave.native="onSwiperLeave")
swiper-slide
//方法: .run()和.pause()对应,.start()和.stop()对应
//鼠标移入
onSwiperEnter() {
this.$refs.mySwiper.$swiper.autoplay.stop();
},
//鼠标离开移入
onSwiperLeave(){
this.$refs.mySwiper.$swiper.autoplay.start();
}
//回到指定位置,第几个swiper-slide,0是第一个
onSlideTo(){
this.$refs.mySwiper.$swiper.slideTo(0);
}
源码会持续更新到公众号,需要可以关注一下哦…
更多推荐
已为社区贡献12条内容
所有评论(0)