Le composant de la boîte à diapositive d'Ionic est utilisé pour implémenter un onglet fascinable. Il surveille principalement les clics et les événements de glissement de la page de glissement, et les gère en conséquence. Utilisez des boucles NG-Repeat pour optimiser et simplifier le code. Les étudiants dans le besoin peuvent y jeter un œil.
Prenons d'abord un rendu:
Le code CSS utilisé:
.tab_default {border-bottom: solide 1px # f2f2f2; rembourrage: 6px 0;}. tab_select {border-bottom: solide 1px # 3e89f5; Box-Shadow: 0 -3px 8px # c1d3f0 inset;}. arrow-top {position: absolu; Largeur: 0; hauteur: 0; En haut: 20px; Border: 6px solide # 3E89F5; Border-Right-Color: transparent; bordure-gauche: transparent; Border-Top-Color: transparent;}. Arrow-top: After {Content: ''; Position: absolue; Largeur: 0; hauteur: 0; Border: 12px solide #fff; à droite: -12px; En bas: -13px; Border-Right-Color: transparent; bordure-gauche: transparent; Border-top-Color: transparent;}Code HTML sur la 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 dans 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-show = "SlectIndex == $ index"> </ div> <Div> <Div> [Div-show = "SlectInDEX == $ index"> </ </ </ </ div-show = "SlectIndex == $ index" * <ion-slide-box on-slide-changed = "slidechanged (index)" active-slide = "slideIndex" DoS-Continue = "false" show-pager = "false"> <ion-slide ng-repeat = "p dans pages"> <divi ng-include = "p"> </v> </dion-lide> </dion-slide-box> </ ion-content> </ ion-View>Code Controller.js correspondant:
$ scope.tabnames = ['java', 'html5', 'android']; $ scope.slectIndex = 0; $ scope.activeSlide = function (index) {// déclenchez lorsque cliquez sur $ Scope.SlectIndex = index; $ ionicslideboxdelegate.slide (index);}; $ scope.slideChanged = fonction (index) {// déclenchez lorsque vous glissez $ scope.slectIndex = index;}; $ scope.pages = ["Templates / tab01.html", "templates / tab02.html", "templates / tab03.html"];TAB01.html, tab02.html, tab03.html sont tous similaires. Publier un TAB01:
<div> page 01 <p style = "margin-top: 30px;"> <img src = "img / tab01.jpg" /> </p> </div>
Note:
• En cliquant, affectez l'index index de la boucle actuelle à la variable SlideIndex. Utilisez la classe NG dans l'onglet pour déterminer si l'index et le diaporama sont les mêmes lors du clic. Si la même chose est vraie, modifiez le style de l'onglet correspondant;
• Lors du glissement, une fonction de la boîte de diapositive est utilisée, à la coute à l'échelle. Lorsque la page de diapositive change, un index de variable sera transmis à la fonction de modification pour identifier l'index de la diapositive actuelle;
• Si vous ne souhaitez pas faire défiler et cliquer simplement, vous pouvez supprimer l'écoute à la glisse sur la glisse, ou ajouter une propriété, désactiver-scroll = "true" et interdire le défilement de la page de diapositive;
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.