由于项目是从基于谷歌浏览器改版成基于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才会被调用成功哒。
