h5 轮播图的接入

不管是app端，还是web端，轮播图是永远少不了的，swiper是当前最流行的，使用最多的一个插件。
但是它有个问题，当我们请求完数据，直接在html中使用angularJs的for循环去创建轮播图，就会很卡，页面加载有问题，所有在这里我使用官方的appSlide来循环添加轮播图的图片。

首先就是导入js和css文件：

初始化swiper：

var swiper = new Swiper('.swiper-container-ad', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true
    });

有问题的方式(使用ng-repeat直接循环，swpier循环有问题)：

解决方法一：

使用函数式编程的实体库Underscore.js，具体用法如下，先导入js文件

然后在html中写上你想要的UI样式，body后面写上你适配好的div控件，body及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中


// js中
$scope.images = [];
$scope.images.push("
");
for(var i = 0; i < response.body.product_images.length; i++){
    $scope.images.push("
");
}                   
$scope.images.push("
");
if(response.body.product_images.length > 1)
    $scope.images.push("
");

$("images").innerHTML = $scope.images.join("");

解决方法三：

通过数值替换来达到创建轮播的目的：

// 定义好展示的轮播图位置

    


// 将我们需要展示的div写好，所有需要赋值的地方，使用#1#依次标记

    

        

            
            

                
                

                
#4#
                

            
            
#5#
        
    


// 然后在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文件，以上就是我所能使用的三种解决方法。