ionic实现用手势左右滑动控制底部tab的切换

 

html代码片段：

1.<ion-tabs class="tabs-icon-top tabs-color-active-positive" id="eventPlaceholder">

在 ion-tabs 上设置一个id

2.然后在该控制器中注入需要的服务：

$ionicGesture,$ionicTabsDelegate

3.js部分：

//手势
var element1 = angular.element(document.querySelector('#eventPlaceholder'));

//左滑动
$ionicGesture.on('dragleft',function(){

var selectedIndex1 = $ionicTabsDelegate.selectedIndex();
if(selectedIndex1 == 0){
  $state.go('tab.sort');
}else if(selectedIndex1 == 1){
  $state.go('tab.count');
}else if(selectedIndex1 == 2){
  $state.go('tab.mine');
}else if(selectedIndex1 == 3){
  $state.go('tab.mine');
}

},element1)

//右滑动
$ionicGesture.on('dragright',function(){

   var selectedIndex2 = $ionicTabsDelegate.selectedIndex();
   if(selectedIndex2 == 3){
     $state.go('tab.count');
   }else if(selectedIndex2 == 2){
     $state.go('tab.sort');
   }else if(selectedIndex2 == 1){
     $state.go('tab.home');
   }else if(selectedIndex2 == 0){
     $state.go('tab.home');
   }

},element1)