原因:
swiper在初始化的时候就在swiper-wrapper下生成了已确定的swiper-slide的个数,如果数据不是初始化的时候就确定的,是异步获取的,就会导致无法滑动
解决方法:
1. 获取数据后再对swiper进行初始化
var reportHtml = '';
$.ajax({
type: "get",
url: url,
dataType: "json",
success:function(data){
$("#reportList").empty();
for(var i=0;i<data.data.length;i++){
reportHtml+='<div class="swiper-slide">'
+'<img src="' + data.data[i].img + '">'
+'</div>';
}
$("#reportList").append(reportHtml);
var swiper = new Swiper('.swiper-container', {
slidesPerView : 3
});
}
});
2. 添加观察参数,自动更新
添加 observer、observeParents
var mySwiper = new Swiper ('.swiper-container', {
observer:true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents:true, // 修改swiper的父元素时,自动初始化swiper
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
},
})