swiper配合AngularJS，Vue,在Loop模式对于动态渲染的数据存在划不动，或者其他匪夷所思BUG的解决办法~

因为banner图是动态创建的，在插件开始初始化时，文档流中并没用图片~我尼玛
解决方法一：

好像挺愚蠢的，不过快准狠，加个定时器

要是你能保证用户那边网络比较顺畅，用这个方法无所谓，但是这样子显然不是很好的解决办法，能不能等监听动态加载数据的repeat结束后再初始化swiper呢？答案是肯定的~

 1 setTimeout(function(){
 2         var swiper1 = new Swiper('#swiper1', {
 3         centeredSlides: true,
 4         autoHeight: true, //高度随内容变化
 5         autoplay:true,
 6         pagination: {
 7             el: '.swiper-pagination',
 8             clickable: true,
 9         },
10         paginationClickable: true,
11         loop:true,
12     });
13 },3000)

解决方法二：
在angularJS1.0中写一个指令用于监听循环结束

 1 //定义指令
 2 .directive('onFinishRenderFilters', function($timeout) {
 3     return {
 4         restrict: 'A',
 5         link: function(scope, element, attr) {
 6             if (scope.$last === true) {
 7                 $timeout(function() {
 8                     scope.$emit('ngRepeatFinished');
 9                 });
10             }
11         }
12     };
13 });

1 <!-- 在需要用到监听循环结束的地方添加自定义指令 -->
2 <div class="swiper-slide" data-ng-repeat="item in banner" on-finish-render-filters>
3     <img width="100%" ng-src="{{item.picUrl}}">
4 </div>

//在需要使用的控制器下使用监听器处理循环结束后做点啥
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    var swiper1 = new Swiper('#swiper1', {
        centeredSlides: true,
        autoHeight: true, //高度随内容变化
        autoplay:true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        paginationClickable: true,
        loop:true,
    });
});

好，那我们再来测试下，嗯不错，swiper恼人的怪异展示问题解决了~