Vue-awesome-swiper: 自动播放，有个bug
vue开启了keep-alive
swiperOption配置开启了lazyLoading跟autoplay
bug出现的场景
从路由a跳转到路由b，在路由b的页面停留时间超过swiper自动播放的时间，点击浏览器后退按钮返回路由a，swiper自动播放失效，对应的swiper里图片也是处于loading状态，没加载。除非手动拖拽一次swiper滚动，才能恢复正常。
cgygd
All 23 comments
感谢反馈，即将修复。
surmon-china
on 25 Dec 2016
经测试，我这里没有重现所描述的问题，可否提供更详细的代码。
swiperOption: {
autoplay: 1000,
setWrapperSize :true,
autoHeight: true,
pagination : '.swiper-pagination',
paginationClickable :true,
mousewheelControl : true,
observeParents:true,
grabCursor : true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true
}
你好，我的代码如下：
模版代码
配置代码
swiperOption: {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false
},
cgygd
on 27 Dec 2016
2.1.0可以手动控制keep-alive的作用组件，可以用这个功能先解决问题。
surmon-china
on 12 Jan 2017
@cgygd 你这个问题处理了没有，我也遇到同样的问题，一直没找到解决的办法。
qiheng
on 6 Sep 2017
@qiheng 没有，2.1.0可以手动控制keep-alive的作用组件，用这个功能先解决问题。
cgygd
on 7 Sep 2017
@cgygd 手动控制keep-alive的作用组件，那就是说我整个页面就没有缓存了
<template>
<div id="app">
<transition name="slide-left" mode="out-in">
<keep-alive>
<router-view class="child-view"></router-view>
</keep-alive>
</transition>
<x-loading :show="config.pageLoading"></x-loading>
</div>
</template>
qiheng
on 7 Sep 2017
@qiheng 你可以尝试在 https://github.com/surmon-china/vue-awesome-swiper/blob/master/src/swiper.vue#L47 这里增加对应的生命周期钩子完成 swiper的 update 方法，如果可行，可以提交 PR.
surmon-china
on 7 Sep 2017
在生命周期activated 方法中调用 update 方法，亲测有效
activated() {
this.swiper.update()
},
dingtwo
on 19 Nov 2017
@dingtwo 我会在下个版本增加此修复，但这可能需要点时间，因为我正在将项目规范化、国际化。
surmon-china
on 20 Nov 2017
我也遇到过这个问题 不过我当时用的是vux里面的轮播图，现在也还没解决，好像部分机型会出现这个问题
wLove-c
on 24 Nov 2017
升级到 v3.0.0
surmon-china
on 29 Nov 2017
v3.0.0 已解决此问题。
surmon-china
on 11 Dec 2017
求助
1：3.0.0 loop为false时 还存在该问题
采取的解决方法是：
activated() {
this.$nextTick(function() {
let mySwiper = this.swiper;
mySwiper.autoplay.timeout = undefined;
mySwiper.autoplay.running = false;
mySwiper.autoplay.start();
})
}
2：但是 当loop置为true 时 又会出现存在这个问题。
forevezxx
on 1 Mar 2018
我最后把这一页的keepalive关了。。
dingtwo
on 1 Mar 2018
v3.1.3仍然存在问题
强制update或者slideNext都没有效果
ycalm
on 24 May 2018
v3.1.3仍然存在问题
强制update或者slideNext都没有效果
feshionxu
on 2 Jul 2018
我又来了...，当轮播图操作后无法自动轮播，即使设置了disableOnInteraction: false,也不行，嗯...顺便有个需求，能否动态改变轮播时间
swiperOption: {
autoplay: {
delay: 2000,
disableOnInteraction: false
},
touchStartPreventDefault: false,
loop: true,
on: {
slideChange: function () {
}
}
},
目前虽然解决动态改变轮播间隔问题，但觉得不是理想中的方法..
wLove-c
on 28 Apr 2019
求助
1：3.0.0 loop为false时 还存在该问题
采取的解决方法是：
activated() {
this.$nextTick(function() {
let mySwiper = this.swiper;
mySwiper.autoplay.timeout = undefined;
mySwiper.autoplay.running = false;
mySwiper.autoplay.start();
})
}
2：但是 当loop置为true 时 又会出现存在这个问题。
请问这个问题现在解决了吗
miaoruifeng
on 22 Aug 2019
在生命周期activated 方法中调用 update 方法，亲测有效
activated() { this.swiper.update() },
我按照这个方法修改了代码 但还是不行，请问现在这个问题解决了吗？
miaoruifeng
on 22 Aug 2019
activated() {
this.$nextTick(function() {
if (this.$refs.swiper) {
this.$refs.swiper.swiper.slideTo(this.realIndex, 1, false);
}
});
},
deactivated() {
this.realIndex = this.$refs.swiper.swiper.realIndex;
}
SubinVane
on 18 Dec 2019
经排查，keepalive缓存的页面依旧会自动播放，导致返回缓存页面时realIndex对应不上。
解决办法：
activated() {
if(this.swiper) {
this.swiper.autoplay.start()
}
},
deactivated() {
if(this.swiper) {
this.swiper.autoplay.stop()
}
}
Taoja
on 20 Apr 2020
可以换个思路，从浏览器的事件入手。 just like this：（vue-awesome-swiper版本：4.1.1，也验证3.1.3此方法也可生效，调整下swiper实例的获取方式即可）
export default {
name: "swiper-example-vertical",
title: "Vertical slider",
components: {
Swiper,
SwiperSlide
},
methods: {
linkGoTo(url) {
window.open(url, "_self");
}
},
data() {
return {
swiperOption: {
direction: "vertical",
loop: true,
// autoplay: false,
// 自动播放
autoplay: {
delay: 300,
disableOnInteraction: false
},
// 设置轮播
effect: "fadeEffect",
//滑动速度
// speed: 500,
loopedSlides: 3,
slidesPerView: 3,
observer: true,
observeParents: true
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
}
},
mounted: function() {
window.onpageshow = function(event) {
// console.log('page show')
// console.log(this.swiper.slideNext);
if (event.persisted) {
if (this.swiper) {
this.swiper.animating = false;
this.swiper.slideNext();
}
}
}.bind(this);
}
};
当然，当页面展示事件触发时，可以用slideTo(swiper.activeIndex)但是突然跳到某一页会令人感到突兀，而且swiper.activeIndex这个明明是个数字却无法作为slideTo入参，具体的数字才可以触发，很神奇不做讨论了。 this.swiper.animating = false;根据slideNext函数的打印发现加上这个才可以正常触发（或者swiper配置中可以设置）。
另外，除了事件中主动让它轮播到下一页，disableOnInteraction: false这个也要加上。
之前也尝试过上面的那些方法却无法为前端小妹解决问题，此方法可行故特告知。具体请看：https://www.jianshu.com/p/c4188216a600
hzhqk
on 23 May 2020
Related issues
PolanZ
·
4Comments
KevinCN511
·
4Comments
ljanecek
·
5Comments
zhaoFangyi
·
7Comments
Bobur-kobilov
·
5Comments
Most helpful comment
v3.1.3仍然存在问题
强制update或者slideNext都没有效果