移动端tab栏中嵌套轮播图

问题：最近写一个移动端的项目，其中一个页面是每个tab栏的内容区均为一个轮播图，用的是swiper实现的轮播图效果，但是写完之后发现，只有第一个tab栏对应的swiper是有效果的，切换后就无法实现轮播的效果。

解决方法：

方法一（推荐）：

在初始化swiper对象的时候，添加observer和observeParents两个属性，当修改swiper自身/父元素/子元素的时候，均会自动初始化swiper，使得切换tab栏的时候，swiper仍有效。

var swiper = new Swiper('.swiper-container', {
        observer: true,       // 修改swiper自己或子元素时，自动初始化swiper  
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        direction: 'vertical' // 轮播图的滑动方向（vertical为垂直滑动）
    });

方法二：

刚开始的时候，还没有发现observer属性，当时的猜测是swiper只在最开始页面加载的时候初始化了一次，所以之后的都没有效果；于是在每次切换的时候都清除之前定义的swiper，并重新初始化新的swiper，但是这个方法在多个tab栏切换的时候会很繁琐，并且使得代码冗余。

HTML：

<div class="swiper-container swiperTab_item1" style="display: none;"></div>
<div class="swiper-container swiperTab_item2" style="display: none;"></div>
<div class="swiper-container swiperTab_item3" style="display: none;"></div>
<div class="swiper-container swiperTab_item4" style="display: none;"></div>

JS:

// 1. 初始化第一个swiper
var swiper1, swiper2, swiper3, swiper4;
swiper1 = new Swiper('.swiperTab_item1', {
        direction: 'vertical'
    });
 // 2. 定义切换的方法
 // 2.1. function：清除上一个swiper对象，并创建新的swiper
    function createSwiper(index) {  
        if (swiper1) {
            swiper1.destroy();
            swiper1 = undefined;
        } else if (swiper2) {
            swiper2.destroy();
            swiper2 = undefined;
        } else if (swiper3) {
            swiper3.destroy();
            swiper3 = undefined;
        } else if (swiper4) {
            swiper4.destroy();
            swiper4 = undefined;
        } 
        var swiper = new Swiper('.swiperTab_item' + index, {
            direction: 'vertical',
            initialSlide: 0
        });
        return swiper;
    }
    // 2.2 切换tab并初始化新的swiper
    function currentSwiper(thisTab, index) {  
        thisTab.css({ "display": "block" });
        thisTab.siblings(".swiper-container").css({ "display": "none" });
        switch (index) {
            case "1":
                swiper1 = createSwiper(index);
                break;
            case "2":
                swiper2 = createSwiper(index);
                break;
            case "3":
                swiper3 = createSwiper(index);
                break;
            case "4":
                swiper4 = createSwiper(index);
                break;
        }
    }

PS：切换的效果是没有问题了，但是有另外一个问题，当在第一个tab栏的时候，将对应的轮播图滑动到第三页（或者任意一张），切换到其他tab栏，再切换回来，仍旧在第三页，而不是第一页，此时需要设定 transform 每次切换将相应轮播图位置归零。

currentTab.find(".swiper-wrapper").css({
    "transform": "translate3d(0px, 0px, 0px)"
});