前言
在做vue项目中使用vue-awesome-swiper插件做轮播图时,遇到的两个自动轮播失效问题,记录下来,也给遇到同样问题的小伙伴一个参考。
问题一:手动滑动后,自动轮播失效
swiperOption配置添加属性 autoplay:{ disableOnInteraction:false }
,如下图:
问题二:vue-router路由跳转后再回到轮播图页面
之前在网上查找资料:
第一种方法是初始化配置设置observe:true,observeParents:true
可以解决,尝试过后发现还是不行;
第二种使用了.stopAutoplay()和.startAutoplay(),最后成功,过程中还是尝试了很久,具体操作分享如下:
step1:获得swiper对象
computed:{
swiper(){
return this.$refs.mySwiper.swiper;
}
},
step2:检测路由状态,在离开当前页面调用stop()
,重新进入调用start()
watch:{
$route(newVal) {
if (newVal.meta.index !=