//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
时间: 2024-11-03 17:01:45