这次给大家带来动态加载数据滑动总是失效怎么办,解决动态加载数据滑动总是失效的注意事项有哪些,下面就是实战案例,一起来看一下。
两种解决方法
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
});
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
js怎样操作改变radio的状态
var foo = function () {} 和 function foo()的区别
bootstrap table怎样设置为高度百分比
以上就是动态加载数据滑动总是失效怎么办的详细内容。