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);