今天在开发过程中遇到一个问题，就是初始化swiper后不能让它默认暂停状态，打开页面便一直在播放中，不符合产品的需求。
于是我vue的computed周期中设置
swiperOption () {
return {
speed: 90,
loop: true,
autoplay: {
delay: 10
}
}
}
还有mySwiper方法
mySwiper () {
return this.$refs.cardSwiper.swiper
}
在methods里写入handleSwiper方法
handleSwiper () {
window.swiper = this.swiper
this.swiper.autoplay.stop()
}
然后在mounted里调用此方法
mounted () {
this.handleSwiper()
}
到最后发现并没有什么乱用！！
无奈挠破头皮，发现只需以下方法就能成功解决：
computed: {
swiperOption () {
return {
speed: 90,
loop: true,
autoplay: {
delay: 10
}
}
},
mySwiper () {
return this.$refs.cardSwiper.swiper
}
},
mounted () {
//无需调用任何方法
},
methods: {
handleSwiper (swiper) {
swiper.autoplay.stop()
}
}
并且在swiper组件加入@ready方法，初始化的时候自动调用
<swiper @ready="handleSwiper" :options="swiperOption" ref="cardSwiper">
...//
</swiper>
这样就完美解决这一问题
