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

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

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

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

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

接着在自己的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('
')
        } else if(data[i].status == 0 && isCheck == "true") {
            html.push('
')
        } else if(data[i].status == 2 && isCheck == "true") {
            html.push('
')
        } else if(data[i].status == 3 && isCheck == "true") {
            html.push('
')
        }
        html.push('
')
        if((data[i].status == 0 && isCheck == "false") || (data[i].status == 3 && isCheck == "false")) {
            html.push('')
        } else if(data[i].status == 0 && isCheck == "true") {
            html.push('')
        } else if(data[i].status == 3 && isCheck == "true") {
            html.push('')
        } else if(data[i].status == 2) {
            html.push('')
        }
        html.push('
')
        html.push('
运单号 ' + data[i].orderId + '
')
        html.push('件数： ' + data[i].num + '')
        html.push('
')
        html.push('
')
        if(data[i].status == 0 || data[i].status == 3) {
            html.push('等待安检...')
        } else if(data[i].status == 2) {
            html.push('安检进行中...')
        }
        html.push('创建时间：')
        html.push('' + compareNull(data[i].createTime, 2).substring(0, 11) + '')
        html.push('')
        html.push('
')
        html.push('
')
        // 内容
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
航班号  ' + data[i].flightId + '
')
        html.push('
')
        html.push('
承运人 ' + data[i].carryPerson + '
')
        html.push('
')
        html.push('
通道号 ' + compareNull(data[i].channelId, 1) + '
')
        html.push('
')
        html.push('
代理人 ' + compareNull(data[i].proxyPerson, 1) + '
')
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('')
        html.push('运单开始时间')
        html.push('' + compareNull(data[i].startTime, 2) + '')
        html.push('
')
        html.push('
')
        html.push('')
        html.push('最近暂停时间')
        html.push('' + compareNull(data[i].lastPauseTime, 2) + '')
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
')
        //相关图片
        html.push('
')
        html.push('
相关图片
')
        html.push('
')
        html.push('
')
        html.push('
')
        //这里是根据后台不同单子对应的不同图片个数进行slider个数的push
        for(var j = 0; j < data[i].photos.length; j++) {
            html.push(
                '
' +
                '' +
                '
'
            )
        }
        html.push('
')
        //swiper按钮
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
')
        html.push('
')

        html.push('
')
        if(data[i].status == 2 && isCheck == "true") {
            html.push('
')
            html.push(' 
提示
')
            html.push('
将货物按照规范搬到传送带上，并开启传送带开关必须结束当前正在安检的运单后，才可以开始下一单')
            html.push('
')
            html.push('
')
        }
        html.push('
')
        html.push('
')
        if(data[i].status == 0 && isCheck == "false") {
            html.push('
开始安检
')
        } else if(data[i].status == 2 && isCheck == "true") {
            html.push('
暂停
')
            html.push('
结束安检
')
        } else if(data[i].status == 3 && isCheck == "true") {
            html.push('
开始
')
            html.push('
结束安检
')
        } else if(data[i].status == 3 && isCheck == "false") {
            html.push('
开始
')
            html.push('
结束安检
')
        } else if(data[i].status == 0 && isCheck == "true") {
            html.push('
开始安检
')
        }
        html.push('
')
        html.push('
')
        html.push('
')
    }
    //填充内容
    $('.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才会被调用成功哒。