下面我就为大家分享一篇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的具体方法?