ionic 自定义teb切换

标签：

       

         //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

ionic 自定义teb切换

标签：

原文地址：http://blog.csdn.net/qinguicheng/article/details/51332186