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

两种解决方法

1、数据加载后进行swiper初始化

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 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初始化加两行代码

1 2 3 4 5 swiper1 = new Swiper('.swiper-container', {  initialSlide :0,  observer:true,//修改swiper自己或子元素时,自动初始化swiper  observeParents:true//修改swiper的父元素时,自动初始化swiper
上一篇:vue引入swiper的报错以及swiper在vue中的交互事件处理


下一篇:两种轮播图实现方式