Ionic To achieve Sliding tab tab switch effect _javascript tips

The use of Ionic slide-box components to achieve sliding tab, mainly listening to the tab and slide page sliding events, do the corresponding processing, with ng-repeat cycle, optimization, abbreviated code, there is a need for students to see.

First, the effect of the picture:

　　

CSS code to use:

. 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-bouncing= "false" >
 <div style= "Display:flex"; width:100%; " >
  <div style= "Flex:1;text-align:center" class= "Tab_default" ng-repeat= "D in Tabnames" ng-click= " Activeslide ($index) "ng-class=" slectindex== $index? ' Tab_select ': ' >
   {{d}}
   <div class= ' arrow-top ' 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>

The corresponding Controller.js code:

$scope. tabnames=[' java ', ' HTML5 ', ' Android ';
$scope. slectindex=0;
$scope. Activeslide=function (Index) {//Click Time to Trigger
 $scope. Slectindex=index;
 $ionicSlideBoxDelegate. Slide (index);
$scope. Slidechanged=function (Index) {//sliding time triggers
 $scope. slectindex=index;
$scope. pages=["templates/tab01.html", "templates/tab02.html", "templates/tab03.html"];

Tab01.html, tab02.html, tab03.html These are the same, put a tab01:

<div style= "width:100%;text-align:center;padding-top:30px;" >
 page
 <p style= "margin-top:30px;" >
  
 </p>
</div>

Note the point:
• Click on the current cycle of the index $index assignment to the variable slideindex, in the tab in the use of Ng-class to determine the index of clicks and SlideIndex is the same, the same change the corresponding tab style;
• Sliding time is used slide-box a function, on-slide-changed, when the slide page changes, will pass to the Change function index to identify the current slide indexes;
• If you do not want to scroll only click, you can remove on-slide-changed listening, you can also add a property, disable-scroll= "true", prohibit slide page scrolling;

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.