不管是app端，還是web端，輪播圖是永遠(yuǎn)少不了的，swiper是當(dāng)前最流行的，使用最多的一個插件。
但是它有個問題，當(dāng)我們請求完數(shù)據(jù)，直接在html中使用angularJs的for循環(huán)去創(chuàng)建輪播圖，就會很卡，頁面加載有問題，所有在這里我使用官方的appSlide來循環(huán)添加輪播圖的圖片。
首先就是導(dǎo)入js和css文件：
<link href="css/swiper-3.3.1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
初始化swiper：
var swiper = new Swiper('.swiper-container-ad', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true
});
有問題的方式(使用ng-repeat直接循環(huán)，swpier循環(huán)有問題)：
<div id="swiperAd" class="swiper-container">
<div class="swiper-wrapper" ng-repeat="row in lists">
<li class="swiper-slide">
<a href="#" target="_blank"><img class="picture" style="vertical-align:top;" src="{{row.imageUrl}}" width="100%"></a>
</li>
</div>
<div style="text-align:center" class="swiper-pagination"></div>
</div>
解決方法一：
使用函數(shù)式編程的實(shí)體庫Underscore.js，具體用法如下，先導(dǎo)入js文件
<script type="text/javascript" src="js/underscore-min.js"></script>
然后在html中寫上你想要的UI樣式，body后面寫上你適配好的div控件，body及script內(nèi)容如下：
<body>
<div class="swiper-container swiper-container-new swiper-container-horizontal">
<div id="swiperwrapper" class="swiper-wrapper">
</div>
</div>
</body>
<script type="text/template" id="templateSwiper">
<li class="swiper-slide">
<a ><img class="picture" style="width:100%;vertical-align:top;" src="<%=pic_url%>"/></a>
</li>
</script>
在js中，我們將通過循環(huán)，將每一個model傳進(jìn)來
for(var i = 0; i < response.response.items.length; i++) {
$scope.item = response.response.items[i];
swiper.appendSlide(_.template($('#templateSwiper').html())($scope.item));
}
注：其中swiper是指初始化創(chuàng)建的對象，在html中，templateSwiper傳入的是model，通過<%=屬性%>來取值。
解決方法二：
這個方法適合不是很復(fù)雜的輪播圖（我這里只輪播圖片），通過html文本的循環(huán)添加到swiper中即可，代碼如下：
// html中
<div id="images" class="swiper-container"></div>
// js中
$scope.images = [];
$scope.images.push("<div id=\"swiperimgs\" class=\"swiper-wrapper\">");
for(var i = 0; i < response.body.product_images.length; i++){
$scope.images.push("<div class=\"swiper-slide\"><img src=\"" + response.body.product_images[i] + "\" style=\"vertical-align:top;max-height:400px;\" width=\"100%\"/></div>");
}
$scope.images.push("</div>");
if(response.body.product_images.length > 1)
$scope.images.push("<div style=\"text-align:right\" class=\"swiper-pagination\"></div>");
$("images").innerHTML = $scope.images.join("");
解決方法三：
通過數(shù)值替換來達(dá)到創(chuàng)建輪播的目的：
// 定義好展示的輪播圖位置
<div class="swiper-container" style="padding:2px;">
<div id="swiperwrapper" class="swiper-wrapper"></div>
</div>
// 將我們需要展示的div寫好，所有需要賦值的地方，使用#1#依次標(biāo)記
<div id="swiperSlide" style="display: none;">
<div class="swiper-slide">
<div style="width:100%;background-color: white;">
<img src="#1#" align="top" width="100%" height="90px" />
<div style="position:relative;z-index: 3;margin-top:-10px;padding:2px;">
<img style="border-radius:100%;float: left;" src="#2#" width="20px" height="20px" />
<div onclick="angular.element(document.querySelector('[ng-controller=group]')).scope().addfavorite(this, #3#)"><img style="float: right;" src="img/5.png" width="21px" height="17px" /></div>
<div style="color:#f7528c;float: right;"><span style="font-size: 9px;">#4#</span></div>
<div style="clear: both;"></div>
</div>
<div style="color:#606060; font-size: 12px;padding:2px;height:35px;">#5#</div>
</div>
</div>
</div>
// 然后在js中，請求結(jié)束時，通過循環(huán)添加和替換
$("#swiperwrapper").html(""); // 先清空當(dāng)前id中所有的html文本
for(var i = 0; i < response.body.array.length; i++){
swiper.appendSlide($("#swiperSlide").html();.replace("#1#", response.body.array[i].post_image).replace("#2#", response.body.array[i].user_avatar).replace("#3#", response.body.array[i].post_guid).replace("#4#", response.body.array[i].post_favorite).replace("#5#", response.body.array[i].post_name));
}
注，這里使用到了jquery的一點(diǎn)語法，需要導(dǎo)入jquery的js文件，以上就是我所能使用的三種解決方法。
