下面我就为大家分享一篇swiper 解决动态加载数据滑动失效的问题，具有很好的参考价值，希望对大家有所帮助。
两种解决方法
1、数据加载后进行swiper初始化
success:function(result){
var resultdata =eval("("+result+")");
if(resultdata.status == 1){
var datalist = resultdata.data;
currentpage = resultdata.currentpage;
pagecount = resultdata.pagecount;
var html = "";
if(pagecount == 0){
html ='<p class="nocollect">' + resultdata.msg + '</p>';
}else{
for(var i in datalist){
var data = datalist[i];
html += '<p class="swiper-container artistp">'
+ '<p class="swiper-wrapper">'
+ '<p class="swiper-slide workp">'
+ '<p class="app_inlineblock workpic">'
+ '<img class="picimg" src="'+ data.artistavatar +'" />'
+ '</p>'+'<p class="app_inlineblock workinfo">'
+ '<p class="artistname">' + data.artistname + '</p>'
+ '<p class="workname">' + data.artworkname + '</p>'
+ '<p class="workvalue">'+ data.typename +'/'+ data.width + '*' + data.height +'/' +data.createyear + '</p>'
+ '</p><p class="app_inlineblockright workprice">'
+ '<p class="price">￥'+ data.marketprice +'</p></p></p>'
+ '<p class="swiper-slide delbtn">删除</p></p></p>';
}
}
$("#list").append(html);
//swiper初始化
var swiper = new swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesperview: 'auto',
paginationclickable: true,
spacebetween: 0
});
}
2、swiper初始化加两行代码
swiper1 = new swiper('.swiper-container', {
initialslide :0,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeparents:true//修改swiper的父元素时，自动初始化swiper
});
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何关闭vue计算属性自带的缓存功能，具体步骤有哪些？
有关在vue中使用compass的具体方法？
利用vue2.0中swiper组件实现轮播（详细教程）
以上就是在swiper中如何解决动态加载数据滑动失效的问题？的详细内容。