swiper的学习（一）：解决动态加载数据滑动失效

最近做项目，要求做一个位于顶部可以左右滑动的tab栏，决定用swiper控件实现
具体的swiper使用方法不多说了，官网链接如下:
http://www.swiper.com.cn/api/basic/2016/0125/295.html

由于容器内部可左右滑动的区域过长，所以采用了网格分布的swiper，初始化如下

var mySwiper = new Swiper('.swiper-container',{    slidesPerView : 3})

在静态数据的情况下正常运行，接下来进行动态数据加载，发现无法正常滑动，后来看到这篇文章：
https://segmentfault.com/a/1190000002962202
发现可能是swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数，从而完成初始化，但是由于动态加载是在初始化完成进行的操作，所以无法确定swiper-wrapper内部swiper-slide的个数，从而导致左右滑动失效

目前有两种解决方法：

1.在动态获取数据后马上对swiper进行初始化

$.ajax({    type:"get",    url:finalUrl,    dataType:"json",    success:function(data){        $("#reportList").empty();        for(var i=0;i<reportLength;i++){            var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";            reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">'                +'<div class="item-title">'+data.resp[i].title+'</div>'                +'<div class="item-content">'+data.resp[i].content+'</div>'                +'<div class="item-date">'+data.resp[i].createTime+'</div>'            +'</div>';        }        $("#reportList").append(reportHtml);        var swiper = new Swiper('.swiper-container', {            slidesPerView : 3        });    }});

2.在swiper初始化的时候

swiper1 = new Swiper('.swiper-container', {    initialSlide :0,    observer:true,//修改swiper自己或子元素时，自动初始化swiper    observeParents:true//修改swiper的父元素时，自动初始化swiper});