Ionic implements slide tab switching. ionictab

Ionic implements slide tab switching. ionictab

Slide tabs can be implemented using the slide-box component of ionic. It mainly listens to tab clicks and slide page sliding events for corresponding processing and uses the ng-repeat loop, optimized and simplified the Code. If you need it, you can check it out.

First take a look:

　　

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-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> <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-box> </ion-content> </ion-view>

Corresponding controller. js code:

$ Scope. tabNames = ['java', 'html5', 'android']; $ scope. slectIndex = 0; $ scope. activeSlide = function (index) {// triggered $ scope when clicked. slectIndex = index; $ ionicSlideBoxDelegate. slide (index) ;}; $ scope. slideChanged = function (index) {// triggered when sliding $ scope. slectIndex = index ;}; $ scope. pages = ["templates/tab01.html", "templates/tab02.html", "templates/tab03.html"];

Tab01.html#tab02.html#tab03.html are similar. paste a tab01:

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

Note:
• When you click, assign the index $ index of the current loop to the variable slideIndex, and use ng-class in the tab to determine whether the index and slideIndex are the same when you click the index, in the same way, the style of the corresponding tab is changed;
• Slide is a slide-box function, on-slide-changed. When the slide page is changed, A variable index will be passed to the function to identify the current slide index;
• If you do not want to scroll, you can remove the on-slide-changed listener or add an attribute, disable-scroll = "true", to disable slide page scrolling;

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.