swiper滑動失效的原因是因為swiper的初始化在數據加載之前完成了,解決這個問題有兩種方法:
1. 使用vue提供的$nextTick()方法
在數據初始化完畢之后,再初始化swiper就可以了
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, //循環切換
autoplay: true,//可選選項,自動滑動
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
})
2.在swiper初始化的時候
swiper1 = new Swiper('.swiper-container', {
loop: true, //循環切換
autoplay: true,//可選選項,自動滑動
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer:true,//修改swiper自己或子元素時,自動初始化swiper
observeParents:true//修改swiper的父元素時,自動初始化swiper
});
