1、新建项目
2、任一页面
<ion-slide-box show-pager="false" class="has-header" on-slide-changed="slideChanged($index)">
<ion-slide > </ion-slide>
</ion-slide-box>
<ion-tabs class="tabs-striped tabs-top">
<ion-tab ng-repeat="item in tabs" on-select="selectedTab($index)" title="{{item.name}}"></ion-tab>
</ion-tabs>
注意写在content外面
3、相应的controller
$scope.slideChanged = function(index) {
$ionicTabsDelegate._instances[1].select(index);//slide索引改变tabs改变
};
$scope.selectedTab = function (index) {
$ionicSlideBoxDelegate.slide(index);
};
$scope.$on('$ionicView.afterEnter', function () {
$ionicTabsDelegate._instances[1].select($ionicSlideBoxDelegate.currentIndex());//默认选择tabs1
});
4、GitHub地址
https://github.com/XuJill/ionic-slide-tabs