swiper 解决动态加载数据滑动失效的问题
程序员文章站
2022-07-06 15:39:13
两种解决方法
1、数据加载后进行swiper初始化
success:function(result){
var resultdata =eval("("+re...
两种解决方法
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 解决动态加载数据滑动失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读