JS通过push方法动态添加swiper组件的slider

由于项目是从基于谷歌浏览器改版成基于IE浏览器，所以项目中基本上是以jQuery来控制DOM，其中遇到了使用数组的push和jQuery的html方法来动态生成页面（主要是一个个运单），页面中引用了swiper，再通过循环生成后台数据所反的相对应个数的slider，但是发现在页面载入后，组件并没有生效，后来终于通过一系列搜索找到了解决的方法，也是痴呆了TAT。

首先需要在页面引入swiper的js文件和css文件

<link rel="stylesheet" href="../../lib/css/swiper-3.4.2.min.css"/>
<script type="text/javascript" src="../../lib/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="../../lib/swiper-3.4.2.min.js"></script>

在HTML中为动态生成的内容准备一个div容器

<section>标签中就是装的动态生成的内容。

<section class="scene-content">
</section>

接着在自己的js代码中开始数组的push方法

这里是生成所有订单的方法，其中涉及到swiper的push方法在相关图片注释处。

var isCheck //标记用户是否点击了安检按钮
function fullOrder(data) {// 填充内容的方法
    isCheck = sessionStorage.getItem('isCheck')//点击了安检按钮后会存入session
    if(isCheck == undefined) {
        for(var k = 0; k < data.length; k++) {
            if(data[k].status == 2) { //后台数据2代表运单正在安检
                isCheck = "true"
                break;
            } else {
                isCheck = 'false'
            }
        }
    } else {}
    var html = []; //定义一个存内容的数组变量
    for(var i = 0; i < data.length; i++) {//循环后台数据返回的单子个数
        //0说明运单在等待安检 2说明正在安检 3说明运单暂停中
        //五花八门的样式真的是害死人啊！！！！！当时写这个写的我都快哭了
        if(data[i].status == 0 && isCheck == "false" || data[i].status == 3 && isCheck == "false") {
            html.push('<div class="waybill waybill-wait">')
        } else if(data[i].status == 0 && isCheck == "true") {
            html.push('<div class="waybill waybill-gray">')
        } else if(data[i].status == 2 && isCheck == "true") {
            html.push('<div class="waybill waybill-proceed">')
        } else if(data[i].status == 3 && isCheck == "true") {
            html.push('<div class="waybill waybill-gray">')
        }
        html.push('<div class="way-head">')
        if((data[i].status == 0 && isCheck == "false") || (data[i].status == 3 && isCheck == "false")) {
            html.push('<i class="circle cir-blue"></i>')
        } else if(data[i].status == 0 && isCheck == "true") {
            html.push('<i class="circle cir-gray"></i>')
        } else if(data[i].status == 3 && isCheck == "true") {
            html.push('<i class="circle cir-gray"></i>')
        } else if(data[i].status == 2) {
            html.push('<i class="circle cir-orange"></i>')
        }
        html.push('<div class="one-tier">')
        html.push('<h4 class="way-tit black-tit">运单号 ' + data[i].orderId + '</h4>')
        html.push('<span class="label green">件数： ' + data[i].num + '</span>')
        html.push('</div>')
        html.push('<p class="two-tier">')
        if(data[i].status == 0 || data[i].status == 3) {
            html.push('<span class="status wait-gray">等待安检...</span>')
        } else if(data[i].status == 2) {
            html.push('<span class="status wait-gray">安检进行中...</span>')
        }
        html.push('<span class="gray-tit creat-time">创建时间：')
        html.push('<i class="black time-font">' + compareNull(data[i].createTime, 2).substring(0, 11) + '</i>')
        html.push('</span>')
        html.push('</p>')
        html.push('</div>')
        // 内容
        html.push('<div class="way-content">')
        html.push('<div class="way-list">')
        html.push('<ul>')
        html.push('<li><p class="gray-tit">航班号 <span class="black gap"> ' + data[i].flightId + '</span></p>')
        html.push('</li>')
        html.push('<li><p class="gray-tit">承运人 <span class="black gap">' + data[i].carryPerson + '</span></p>')
        html.push('</li>')
        html.push('<li><p class="gray-tit">通道号 <span class="black gap">' + compareNull(data[i].channelId, 1) + '</span></p>')
        html.push('</li>')
        html.push('<li><p class="gray-tit">代理人 <span class="black gap">' + compareNull(data[i].proxyPerson, 1) + '</span></p>')
        html.push('</li>')
        html.push('</ul>')
        html.push('<div class="way-plan">')
        html.push('<div class="plan-part">')
        html.push('<p class="plan-node">')
        html.push('<i class="spot green-spot"></i>')
        html.push('<span class="gray-tit" style="margin-right: 16px;">运单开始时间</span>')
        html.push('<span class="black">' + compareNull(data[i].startTime, 2) + '</span>')
        html.push('</p>')
        html.push('<p class="plan-node">')
        html.push('<i class="spot red-spot"></i>')
        html.push('<span class="gray-tit" style="margin-right: 16px;">最近暂停时间</span>')
        html.push('<span class="black">' + compareNull(data[i].lastPauseTime, 2) + '</span>')
        html.push('</p>')
        html.push('</div>')
        html.push('</div>')
        html.push('</div>')
        //相关图片
        html.push('<div class="relation-img">')
        html.push('<p class="gray-tit">相关图片</p>')
        html.push('<div class="img-list">')
        html.push('<div class="swiper-container">')
        html.push('<div class="swiper-wrapper" style="height: 100px;">')
        //这里是根据后台不同单子对应的不同图片个数进行slider个数的push
        for(var j = 0; j < data[i].photos.length; j++) {
            html.push(
                '<div class="swiper-slide" style="width: 150px">' +
                '<img src="' + data[i].photos[j].photoPath + '" width="90%" style="border-radius: 5px;height: 100px;"  onclick="preImg(this)">' +
                '</div>'
            )
        }
        html.push('</div>')
        //swiper按钮
        html.push('<div class="swiper-button-next"></div>')
        html.push('<div class="swiper-button-prev"></div>')
        html.push('</div>')
        html.push('</div>')
        html.push('</div>')
        html.push('</div>')

        html.push('<div class="hint">')
        if(data[i].status == 2 && isCheck == "true") {
            html.push('<div class="hint-content">')
            html.push(' <p class="hint-tit"><i class="hint-icon"></i>提示</p>')
            html.push('<p class="hint-txt">将货物按照规范搬到传送带上，并开启传送带开关必须结束当前正在安检的运单后，才可以开始下一单')
            html.push('</p>')
            html.push('</div>')
        }
        html.push('</div>')
        html.push('<div class="way-footer">')
        if(data[i].status == 0 && isCheck == "false") {
            html.push('<div class="start-btn fot-blue" onclick="checkSecurity(this)" data-orderId="' + data[i].orderId + '">开始安检</div>')
        } else if(data[i].status == 2 && isCheck == "true") {
            html.push('<div class="switch" onclick="stopSeurity(this)"  data-orderId="' + data[i].orderId + '"><span>暂停</span></div>')
            html.push('<div class="footer-btn fot-orange" onclick="showAlert(this)" data-orderId="' + data[i].orderId + '">结束安检</div>')
        } else if(data[i].status == 3 && isCheck == "true") {
            html.push('<div class="orange-switch" onclick="showDialogAlertGo()"><span>开始</span></div>')
            html.push('<div class="footer-btn fot-gray">结束安检</div>')
        } else if(data[i].status == 3 && isCheck == "false") {
            html.push('<div class="orange-switch" onclick="checkSecurity(this)" data-orderId="' + data[i].orderId + '"><span>开始</span></div>')
            html.push('<div class="footer-btn fot-gray">结束安检</div>')
        } else if(data[i].status == 0 && isCheck == "true") {
            html.push('<div class="start-btn fot-gray" onclick="showDialogAlertGo()">开始安检</div>')
        }
        html.push('</div>')
        html.push('</div>')
        html.push('</div>')
    }
    //填充内容
    $('.scene-content').html(html.join(''))

接下来初始化swiper，然后在请求后台数据成功后的回调函数调用fullOrder方法

//初始化swiper
$(function() {
 var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            })
})

// 初始化订单
function loadOrder() {
    $.ajax({
        type: "GET",
        url: Utils.url + "/order/getOrder_site" + '?timestamp=' + new Date().getTime(),
        contentType: "application/json;charset=UTF-8",
        dataType: 'json',
        success: function(data) {
            $('el-loading-mask').hide()
            fullOrder(data)         
        }
    })
}

结果发现swiper根本没有被调用到，默默的mark一下，在图片多的情况下判断swiper是否成功初始化看左右按钮的颜色是否一深一浅就知道了。
正确初始化swiper的方法应该是在fullOrder方法之后或者是在fullOrder里的element.html()之后。由于swiper是需要先初始化再执行，但这里是先生成swiper，所以需要在生成swiper之后再初始化。

$('.scene-content').html(html.join('')) //填充之后初始化swiper
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        onSlideChangeEnd: function(swiper) {
            swiper.update();
            // mySwiper.startAutoplay();
            // mySwiper.reLoop();
        }
    })

只有这样在页面加载完后swiper才会被调用成功哒。