Ionic To achieve Sliding tab tab switch effect _javascript tips

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.