Die Diasboxkomponente von Ionic wird verwendet, um eine Slidable-Registerkarte zu implementieren. Es überwacht hauptsächlich die Registerkartenklicks und die Schieber -Siebereigerungen und behandelt sie entsprechend. Verwenden Sie NG-Repeat-Schleifen, um den Code zu optimieren und zu vereinfachen. Bedürftige Schüler können einen Blick darauf werfen.
Nehmen wir zuerst eine Wiedergabe:
Der verwendete CSS -Code:
.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: absolut; Breite: 0; Höhe: 0; Top: 20px; Grenze: 6PX Solid #3E89F5; Grenzrechte Farbe: transparent; Grenze linksfarben: transparent; Border-Top-Color: transparent;}. Pfeil-top: After {Inhalt: ''; Position: absolut; Breite: 0; Höhe: 0; Grenze: 12px Solid #fff; Rechts: -12px; unten: -13px; Grenzrechte Farbe: transparent; Grenze linksfarben: transparent; Grenze-Top-Farben: transparent;}HTML -Code auf der Seite:
<Ion-View View-Title = "Sliding Tab"> <Ion-Content has-buncing = "false"> <div style = "Anzeige: Flex; Breite: 100%;"> <div style = "flex: 1; text-align: center;" ng-repeat = "D in tabnames" ng-klick = "activeSlide ($ index)" ng-class = " <Ion-Slide-Box On-Slide-Veränderung = "Slidechanged (Index)" Active-Slide = "SlideIndex" do-continue = "False" show-Pager = "False"> <Ion-Slide ng-repeat = "p in Seiten"> <divc-include </Ion-In-In-Inhalt> </Ion-View>
Entsprechender Controller.js Code:
$ scope.tabnames = ['java', 'html5', 'android']; $ scope.slectIndex = 0; $ IonicsLideBoxDelegate.slide (index);}; $ scope.slidechanged = function (index) {// Trigger beim Schieben $ scope.slectIndex;};Tab01.html, tab02.html, tab03.html sind alle ähnlich. Poste einen tab01:
<div> Seite 01 <p style = "margin-top: 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
Notiz:
• Bei Klicken den Index $ index der aktuellen Schleife dem variablen SlideIndex zuweisen. Verwenden Sie die NG-Klasse in der Registerkarte, um festzustellen, ob der Index und der SlideIndex beim Klicken gleich sind. Wenn dieselbe wahr ist, ändern Sie den Stil der entsprechenden Registerkarte.
• Beim Schieben wird eine Funktion der Diasbox verwendet, die sich mit dem Klimaveränderungen befindet. Wenn sich die Folie -Seite ändert, wird ein Variablenindex an die Änderungsfunktion übergeben, um den Index der aktuellen Folie zu identifizieren.
• Wenn Sie nicht scrollen und nur klicken möchten, können Sie das anschleuderte Hörer entfernen oder eine Eigenschaft hinzufügen, scroll = "true" deaktivieren und das Scrollen der Folie-Seite verbieten.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.