問題：最近寫一個移動端的專案，其中一個頁面是每個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)"
});