ionic1開發之tabs

在實際專案的開發中，專案的長相也就是UI的結構，常見的大致分為三種：tabs型，slide-menu型以及其他型。
tabs型尤為常見，也就是在app的底部被分為了幾個選項卡（tab）。大部分app都是tabs型，使用ionic start建立專案的時候預設的也是tabs的。
slide-menu：也就是側滑選單，移動版QQ就是一個tabs+slide-menu的app，單用slide-menu的也有，但比較少見。

---

常規做法

目前正在做的這個專案就是一個tabs的app，一開始的時候也是用的最常規的做法。建立了4個選項卡，tab1、tab2、tab3、tab4。
其他頁面根據分類放到各個tab下，也就是在配置路由的時候給每個非tab的頁面都設定views、

.state('tab.xxx', {
  url:'/xxx',
  views:{
    'tab1':{
     templateUrl:'templates/xxx.html',
     controller:'xxxCtrl'
     }
  }
})

1. 常規的做法基本上能滿足大部分的需求，只是在tab頁面跳轉到tab的views的頁面去的時候，需要用程式碼$ionicTabsDelegate.hide()來隱藏tab-bar，然後在tab頁面出現的時候又呼叫$ionicTabsDelegate.show()來顯示tab-bar。

2. tab1的views下的A頁面跳轉到tab2的views下面的B頁面，單用$state.go()來進行跳轉，跳轉的時候不會出現前進的動畫；
   如果使用$ionicViewSwitcher.nextDirection("forwoard/back")來新增動畫，在跳轉的過程中會出現黑屏的現象；
   當從B頁面返回到A頁面，再返回到tab1頁面然後切換到tab2時，直接在tab2上顯示的是B頁面。此時點選頁面B的返回按鈕做$ionicHistory.goBack()回到的是tab1頁面。此時可在每個tab頁面出現時寫入$ionicHistory.clearHistory()來實現切換到tab2去看到的是tab2的頁面。

---

其他頁面不設定views

做到這個時候，我選擇了另外一種做法，在配置路由時不再給每個非tab頁面設定views

  .state('xxx', {
    url:'/xxx',
    templateUrl:'templates/xxx.html',
    controller:'xxxCtrl'
  })

1. 從tab頁面跳轉到其他頁面去的時候不用再寫隱藏tab-bar的程式碼，也不用在tab頁面出現的時候寫顯示tab-bar的程式碼；

2. 各個頁面之間的跳轉不會再出現tab上顯示的頁面是被跳轉的頁面。

3. 各個頁面之間跳轉全沒有動畫了，所以就需要在跳轉的時候加上程式碼來實現跳轉動畫。
   $state.go()後面加上$ionicViewSwitcher.nextDirection("forwoard")；
   $ionicHistory.goBack()後面加上$ionicViewSwitcher.nextDirection("back")。

4. A頁面forward到頁面B，然後B頁面back到A頁面，此時B頁面的快取是不會被自動清除。
   此時最簡單的做法就是不快取頁面，可以在ion-view標籤中設定cache-view=false；
   也可以在配置路由的時候設定cache：false；
   當然也可以設定全域性最大快取$ionicConfigProvider.views.maxCache(0)，0表示所有頁面都不快取。

5. 在對app的使用者體驗要求不是很高的時候可以通過設定快取來做，如果對使用者體驗要求高一些的話，那就要通過程式碼對$ionicHistory的操作來實現快取的清理。目前我的做法是這樣的，不排除還有更好的辦法可以解決這個問題！

    var backView = $ionicHistory.backView();
    if (!backView) return;var clearStateIds = [];
    var forwardViewId = backView.forwardViewId;
    if (!forwardViewId) {  
      clearStateIds.push($ionicHistory.currentView().stateId);
    } else { 
    while (forwardViewId) { 
      var view = $ionicHistory.getViewById(forwardViewId);
      clearStateIds.push(view.stateId);
      forwardViewId = view.forwardViewId;  
     }
    }
    $timeout(function () {  
      $ionicHistory.clearCache(clearStateIds);
    }, 600);