tab切换中嵌套swiper轮播

今天在做官网的时候需要用到swiper多图轮播的功能，但是得嵌套在tab切换中，就在我把砖都搬完后，发现了个问题，就是我在进行tab切换后，发现原本设置的swiper的自动轮播竟然失效了，而且样式也是乱的，只有第一项是正常的，这时我就在网上进行地毯式的搜索，找了好半天也没找到解决的方案，于是自己就索性去研究了下，把我的解决方法展示在这里，仅供参考

1、针对tab切换样式直接乱掉的问题

// 在配置中添加这两个属性
启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false
observer: true,
// 将observe应用于Swiper的祖先元素。当Swiper的祖先元素变化时，例如window.resize，Swiper更新。
observeParents: true,

2、切换后无法自动轮播

// 我们需要对tab中的每个swiper进行实例化，也就是说，你有几个swiper就要实例化几次swiper,比如下面这个代码
var swiper1 = new Swiper('.swiper-container1', {
    slidesPerView: 6,
    spaceBetween: 10,
    loop: true,
    autoplay: 3000
});
var swiper2 = new Swiper('.swiper-container2', {
    slidesPerView: 6,
    spaceBetween: 10,
    loop: true,
    autoplay: 3000
});
…………

/**
 * 当然，我们不能这么写，我们可以给这个实例化的swiper进行封装下，请看示例：
 @params index 点击tab切换对应的索引值，每次切换的时候调用下这个方法，然后传个当前的索引过来，需要注意 的是这个方法要先在onload中执行下，不然你刚进入页面就会有问题了，然后就是你的索引是从0开始的哦，然后就ok啦
 */
function createSwiper(index) {
    var swiper = new Swiper('.swiper' + index, {
        // 根据浏览器宽度决定一屏显示几个
        slidesPerView: mInnerWidth > 768 ? 6 : 3,
        spaceBetween: 10,
        loop: true,
        autoplay: 3000,
        // tab切换失效bug解决
        observer: true,
        observeParents: true,
        // 抓手图标
        grabCursor: true
    });
    return swiper;
}