发现很多小伙伴用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);
 }

源码会持续更新到公众号,需要可以关注一下哦…

Logo

前往低代码交流专区

更多推荐