Vorwort
Da die Umschaltungs -Foliekomponente mit Wörtern im Projekt erforderlich ist, liefert Ionic Folgendes:
Was Sie im eigentlichen Projekt brauchen:
Ich habe online nach anderen Implementierungen gesucht, aber ich hatte das Gefühl, dass es nichts Ähnliches gab, und ich fand nichts geeignetes, also habe ich versucht, einen zu definieren und es so wie möglich zu benutzen. Erstens die Renderings
Es gibt verschwommene, gezackte Kanten bei der Betrachtung der Renderings, die möglicherweise auf den Einfluss von Pixeln zurückzuführen sein und auf Android- und iOS -Telefone sehr reibungslos abschneiden.
Code implementieren
Tatsächlich ist es sehr einfach zu implementieren. Es berechnet hauptsächlich die Position des Schiebereglers. Das Gleit verwendet CSS -Transformation.
Die von CSS verwendeten Klassen sind wie folgt:
.switch_search {Position: relativ; Anzeige: Flex; Breite: 120px; Höhe: 28px; Randtop: 8px; Rand: Solid 1px #fff; Border-Radius: 16px;}. Switch_search_tab {Flex: 1; Höhe: 28px; Breite: 60px; Zeilenhöhe: 28px; Farbe:#203c4b; Z-Index: 12;}. White_search_tab {Farbe: #fff;}. Switch_bg {Hintergrund: #fff; Border-Radius: 16px; Position: Absolute; Oben: -1px; links: -1px; Höhe: 28px; Breite: 60px;}. Search_right {Übergang: -Webkit-Transformation, Transformation 0,6s Leichtigkeit; -Webkit-transform: Translate3d (60px, 0, 0); -moz-transform: translate3d (60px, 0, 0); Transformation: Translate3d (60px, 0, 0);}. Search_Left {Übergang: -Webkit -Transformation, Transformation 0,6s Leichtigkeit; -Webkit-transform: Translate3d (0px, 0, 0); -moz-transform: translate3d (60px, 0, 0);}. Search_left {Übergang: -Webkit-Transform, Transformation 0,6s Leichtigkeit; -Webkit-transform: Translate3d (0px, 0, 0); -moz-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (0px, 0, 0); Transformation: Translate3d (0px, 0, 0);}HTML -Code auf der Seite:
<div> <div auf-swipe-right = "ActivesSearch (1)" ng-klick = "activesSearch (0)" ng-class = "(SlideInsearch == 0 || SlideInsearch ==-1)? '': 'White_Search_tab'" ng-klick = "ActivesLidearch (1)" ng-class = "(SlideInsearch == 1)? '': 'White_Search_tab'"> Tag </div> <div ng-class = "(SlideIndeSearch == 0 || SlideInsearch ==-1)? '
Der entsprechende Controller JS -Code lautet wie folgt:
$ scope.slideIndexSearch = -1; $ scope.activeSlidearch = function (index) {$ scope.slideIndexsearch = index;};Auf diese Weise kann eine einfache Schaltkomponente mit Wörtern implementiert werden.
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.