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

Posted 不积跬步无以至千里不积小流无以成江海

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 解决动态加载数据滑动失效的问题的主要内容,如果未能解决你的问题,请参考以下文章

关于Tab切换中嵌套Swiper移动端滑动插件,导致Swiper插件失效的问题

swiper-动态更改数据后轮播点击或拖动失效

Swiper的jquery动态渲染不能滑动

Swiper 轮播插件 之 动态加载无法滑动

vue使用swiper的坑-刷新不动,loop属性失效

swiper初始化问题