The slide-box component of ionic is used to implement a slideable tab. It mainly monitors tab clicks and slide page sliding events, and handles them accordingly. Use ng-repeat loops to optimize and simplify the code. Students in need can take a look.
Let’s take a rendering first:
The css code used:
.tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0;}.tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3F0 inset;}.arrow-top { position: absolute; width: 0; height: 0; top:20px; border: 6px solid #3E89F5; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent;}.arrow-top:after { content:''; position:absolute; width: 0; height: 0; border: 12px solid #fff; right: -12px; bottom: -13px; border-right-color:transparent; border-left-color:transparent; border-top-color:transparent;}HTML code on the page:
<ion-view view-title="sliding tab"> <ion-content has-buncing="false"> <div style="display:flex;width:100%;"> <div style="flex:1;text-align: center;" ng-repeat="d in tabNames" ng-click="activeSlide($index)" ng-class="slectIndex==$index ? 'tab_select' : '' "> {{d}} <div style="left:{{15+$index*33}}%" ng-show="slectIndex==$index"></div> </div> </div> <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" does-continue="false" show-pager="false"> <ion-slide ng-repeat="p in pages"> <div ng-include="p"></div> </ion-slide> </ion-slide-box> </ion-content></ion-view>Corresponding controller.js code:
$scope.tabNames=['java','html5','android'];$scope.slectIndex=0;$scope.activeSlide=function(index){//Trigger when clicking $scope.slectIndex=index; $ionicSlideBoxDelegate.slide(index);};$scope.slideChanged=function(index){//Trigger when sliding $scope.slectIndex=index;};$scope.pages=["templates/tab01.html","templates/tab02.html","templates/tab03.html"];Tab01.html, tab02.html, tab03.html are all similar. Post a tab01:
<div> page 01 <p style="margin-top:30px;"> <img src="img/tab01.jpg"/> </p></div>
Note:
• When clicking, assign the index $index of the current loop to the variable slideIndex. Use ng-class in the tab to determine whether the index and slideIndex are the same when clicking. If the same is true, change the style of the corresponding tab;
•When sliding, a function of slide-box is used, on-slide-changed. When the slide page changes, a variable index will be passed to the change function to identify the index of the current slide;
•If you don’t want to scroll and just click, you can remove the on-slide-changed listening, or add a property, disable-scroll="true", and prohibit scrolling of slide page;
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.