js拼接字符串后swiper样式无效，不能滑动的解决方案

swiper插件HTML中可以正常使用，但是在js中拼接字符串生成swiper的HTML就失效了！

解决办法 ： swiper的配置一定要放在拼接字符串之后，紧随其后，如果放在其他的位置，swiper是不识别HTML的。

//························
//步骤
let buzhouDataall = '';
//console.log(data.data.step)
for(let i=0;i<data.data.step.length;i++){
    buzhouDataall+='<h4 class="buzhoutitle">步骤 <p><span>'+ (i+1) +'</span>/'+ data.data.step.length +' </h4>';
    buzhouDataall+='<div class="detail">';
 
        if(data.data.step[i].icon.length>1){
    //轮播
        buzhouDataall+='<div class=\"swiper-container\">';
        buzhouDataall+='<div class=\"swiper-wrapper\">';
        for(let j=0;j<data.data.step[i].icon.length;j++){
            // console.log(data.data.step[i].icon[j]);
            buzhouDataall+='<div class=\"swiper-slide\"><img src=\"'+ 'http://*******.net/'+data.data.step[i].icon[j] +'\" alt="" style="width: 100%"></div>'
        }
        buzhouDataall+=' </div>';
 
        buzhouDataall+='<div class=\"swiper-button-next\"></div>';
        buzhouDataall+='<div class=\"swiper-button-prev\"></div>';
        buzhouDataall+='</div>'
    }else{
        buzhouDataall+='  <img src="'+ 'http://oss.dev.51zhiyuan.net/'+data.data.step[i].icon[0] +'" alt="" style="width: 100%">'
    }
 
    buzhouDataall+='<p class="ready">'+ data.data.step[i].outline +'</p>';
    buzhouDataall+=' <p class="fliao">';
    buzhouDataall+=' <span><img src="static/img/[email protected]" alt=""></span>';
 
    for(let j=0;j<data.data.step[i].material.length;j++){
 
        buzhouDataall+=`<span class="feiliaocontent" >${data.data.step[i].material[j].name}${data.data.step[i].material[j].number}${data.data.step[i].material[j].unit==0?'克':data.data.step[i].material[j].unit==1?'千克':data.data.step[i].material[j].unit==2?'盎司':data.data.step[i].material[j].unit==3?'磅':data.data.step[i].material[j].unit==4?'毫升':data.data.step[i].material[j].unit==5?'升':data.data.step[i].material[j].unit==6?'小勺':data.data.step[i].material[j].unit==7?'大勺':data.data.step[i].material[j].unit==8?'杯':data.data.step[i].material[j].unit==9?'个':data.data.step[i].material[j].unit==10?'少许':data.data.step[i].material[j].unit==2?'盎司':data.data.step[i].material[j].unit==11?'滴':data.data.step[i].material[j].unit==12?'根':''}、</span>`
    }
 
    // buzhouDataall+=' <span class="feiliaocontent" ></span>';
 
 
    buzhouDataall+='  </p>';
    buzhouDataall+=' </div>';
}
 
$(".buzhou").html(buzhouDataall);
 
//swiper的配置要紧随其后  划重点
var mySwiper = new Swiper('.swiper-container',{
    pagination : '.swiper-pagination',
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    paginationClickable: true,
    //……
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
})
//·································

转载自 https://blog.csdn.net/xr510002594/article/details/81904999#commentBox