Swiper动态加载后无法滑动

本文最后更新于:1 个月前

说明

Vue中使用Swiper,但是父组件会有状态切换,切换后Swiper出现异常(卡着其中一组不能滑动切换)

image-20200806133320474

查资料找到解决办法,原因为swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载是在初始化之后的动作,所以导致无法滑动

解决方法1:在动态获取数据后,马上对swiper进行初始化

每次获取数据后再对swiper进行初始化操作,说白了就是先后顺序不能错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.ajax({
type:"get",
url:finalUrl,
dataType:"json",
success:function(data){
$("#reportList").empty();
for(var i=0;i<reportLength;i++){
var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";
reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">'
+'<div class="item-title">'+data.resp[i].title+'</div>'
+'<div class="item-content">'+data.resp[i].content+'</div>'
+'<div class="item-date">'+data.resp[i].createTime+'</div>'
+'</div>';
}
$("#reportList").append(reportHtml);
var swiper = new Swiper('.swiper-container', {
slidesPerView : 3
});
}
});

解决方法2:修改Swiper参数实现监听变化

observer:true, //修改swiper自己或子元素时,自动初始化swiper
observeParents:true, //修改swiper的父元素时,自动初始化swiper

1
2
3
4
5
6
7
8
9
var mySwiper = new Swiper ('.swiper-container', {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
},

})

::: tip

部分内容来自Carina

:::


Swiper动态加载后无法滑动
https://www.chanx.tech/2020/5cae0213a330/
作者
ischanx
发布于
2020年8月6日
更新于
2022年6月12日
许可协议