不管是app端，还是web端，轮播图是永远少不了的，swiper是当前最流行的，使用最多的一个插件。
但是它有个问题，当我们请求完数据，直接在html中使用angularJs的for循环去创建轮播图，就会很卡，页面加载有问题，所有在这里我使用官方的appSlide来循环添加轮播图的图片。
首先就是导入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直接循环，swpier循环有问题)：
<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>
解决方法一：
使用函数式编程的实体库Underscore.js，具体用法如下，先导入js文件
<script type="text/javascript" src="js/underscore-min.js"></script>
然后在html中写上你想要的UI样式，body后面写上你适配好的div控件，body及script内容如下：
<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 href="http://detail.koudaitong.com/show/goods?alias=<%=alias%>"><img class="picture" style="width:100%;vertical-align:top;" src="<%=pic_url%>"/></a>
</li>
</script>
在js中，我们将通过循环，将每一个model传进来
for(var i = 0; i < response.response.items.length; i++) {
$scope.item = response.response.items[i];
swiper.appendSlide(_.template($('#templateSwiper').html())($scope.item));
}
注：其中swiper是指初始化创建的对象，在html中，templateSwiper传入的是model，通过<%=属性%>来取值。
解决方法二：
这个方法适合不是很复杂的轮播图（我这里只轮播图片），通过html文本的循环添加到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("");
解决方法三：
通过数值替换来达到创建轮播的目的：
// 定义好展示的轮播图位置
<div class="swiper-container" style="padding:2px;">
<div id="swiperwrapper" class="swiper-wrapper"></div>
</div>
// 将我们需要展示的div写好，所有需要赋值的地方，使用#1#依次标记
<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中，请求结束时，通过循环添加和替换
$("#swiperwrapper").html(""); // 先清空当前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的一点语法，需要导入jquery的js文件，以上就是我所能使用的三种解决方法。
网友评论