swiper 解决动态加载数据滑动失效的问题

时间:2021-05-26

两种解决方法

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 ='<div class="noCollect">' + resultdata.msg + '</div>'; }else{ for(var i in dataList){ var data = dataList[i]; html += '<div class="swiper-container artistDiv">' + '<div class="swiper-wrapper">' + '<div class="swiper-slide workDiv">' + '<div class="app_inlineBlock workPic">' + '<img class="picImg" src="'+ data.artistAvatar +'" />' + '</div>'+'<div class="app_inlineBlock workInfo">' + '<div class="artistName">' + data.artistName + '</div>' + '<div class="workName">' + data.artworkName + '</div>' + '<div class="workValue">'+ data.typeName +'/'+ data.width + '*' + data.height +'/' +data.createYear + '</div>' + '</div><div class="app_inlineBlockRight workPrice">' + '<div class="price">¥'+ data.marketPrice +'</div></div></div>' + '<div class="swiper-slide delBtn">删除</div></div></div>'; } } $("#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 });

以上这篇swiper 解决动态加载数据滑动失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章