欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-25 12:16:52
...

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 

 

相关标签: swiper