ionic 自定义teb切换

来源：互联网发布：自学plc编程怎么学编辑：程序博客网时间：2024/06/05 13:23

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

0 0