由于項目是從基于谷歌瀏覽器改版成基于IE瀏覽器，所以項目中基本上是以jQuery來控制DOM，其中遇到了使用數(shù)組的push和jQuery的html方法來動態(tài)生成頁面（主要是一個個運單），頁面中引用了swiper轧膘，再通過循環(huán)生成后臺數(shù)據(jù)所反的相對應(yīng)個數(shù)的slider，但是發(fā)現(xiàn)在頁面載入后，組件并沒有生效攒岛，后來終于通過一系列搜索找到了解決的方法，也是癡呆了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中為動態(tài)生成的內(nèi)容準(zhǔn)備一個div容器
<section>標(biāo)簽中就是裝的動態(tài)生成的內(nèi)容灾锯。
<section class="scene-content">
</section>
接著在自己的js代碼中開始數(shù)組的push方法
這里是生成所有訂單的方法，其中涉及到swiper的push方法在相關(guān)圖片注釋處嗅榕。
var isCheck //標(biāo)記用戶是否點擊了安檢按鈕
function fullOrder(data) {// 填充內(nèi)容的方法
isCheck = sessionStorage.getItem('isCheck')//點擊了安檢按鈕后會存入session
if(isCheck == undefined) {
for(var k = 0; k < data.length; k++) {
if(data[k].status == 2) { //后臺數(shù)據(jù)2代表運單正在安檢
isCheck = "true"
break;
} else {
isCheck = 'false'
}
}
} else {}
var html = []; //定義一個存內(nèi)容的數(shù)組變量
for(var i = 0; i < data.length; i++) {//循環(huán)后臺數(shù)據(jù)返回的單子個數(shù)
//0說明運單在等待安檢 2說明正在安檢 3說明運單暫停中
//五花八門的樣式真的是害死人八骋３炒稀！＜嫘邸Ｒ魇拧！當(dāng)時寫這個寫的我都快哭了
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">件數(shù)： ' + 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">創(chuàng)建時間：')
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>')
// 內(nèi)容
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>')
//相關(guān)圖片
html.push('<div class="relation-img">')
html.push('<p class="gray-tit">相關(guān)圖片</p>')
html.push('<div class="img-list">')
html.push('<div class="swiper-container">')
html.push('<div class="swiper-wrapper" style="height: 100px;">')
//這里是根據(jù)后臺不同單子對應(yīng)的不同圖片個數(shù)進行slider個數(shù)的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">將貨物按照規(guī)范搬到傳送帶上赦肋，并開啟傳送帶開關(guān)必須結(jié)束當(dāng)前正在安檢的運單后块攒，才可以開始下一單')
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 + '">結(jié)束安檢</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">結(jié)束安檢</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">結(jié)束安檢</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>')
}
//填充內(nèi)容
$('.scene-content').html(html.join(''))
接下來初始化swiper，然后在請求后臺數(shù)據(jù)成功后的回調(diào)函數(shù)調(diào)用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)
}
})
}
結(jié)果發(fā)現(xiàn)swiper根本沒有被調(diào)用到佃乘，默默的mark一下囱井，在圖片多的情況下判斷swiper是否成功初始化看左右按鈕的顏色是否一深一淺就知道了。
正確初始化swiper的方法應(yīng)該是在fullOrder方法之后或者是在fullOrder里的element.html()之后趣避。由于swiper是需要先初始化再執(zhí)行庞呕，但這里是先生成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才會被調(diào)用成功噠骆捧。
