//HTML 代码
<div class="row">
<div class=" tabs gem-position-static profile-tabs" ng-repeat="item in initSlideTabs.data">
<a class="tab-item " href="#" ng-click="activeSlide($index)" ng-bind="item.name">
</a>
</div>
</div>
<ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" does-continue="{{initSlideTabs.doesContinue}}" show-pager="{{initSlideTabs.showPager}}">
<ion-slide ng-repeat="item in initSlideTabs.data">
<div ng-include="item.tpl" class="padding"></div>
</ion-slide>
</ion-slide-box>
/*个人主页*/ controller.js
.controller('personHomeCtrl', function ($scope,$ionicSlideBoxDelegate) {
//初始化slidetabs数据
$scope.initSlideTabs = {
data:[
{name:"主页",tpl:'templates/person/person-home-page.html'},
{name:"课程",tpl:'templates/person/person-course.html'},
{name:"文章",tpl:'templates/person/ad.html'},
{name:"作业",tpl:'templates/person/ad.html'}
],//tab的内容
doesContinue:false,//是否循环切换
showPager:false//是否显示小黑点
//slideInterval:4000//自动切换的时间间隔
};
//默认选择第一个
$scope.slideIndex = 0;
//滑动下面的滑块,响应上面的tabs切换
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
//点击上面的tabs切换,响应下面的滑块滑动
$scope.activeSlide = function (index) {
$ionicSlideBoxDelegate.slide(index);
};
})
源码:
http://download.csdn.net/detail/qinguicheng/9512076