Préface
Étant donné que le composant coulissant à bascule avec des mots est requis dans le projet, Ionic le fournit:
Ce dont vous avez besoin dans le projet réel:
J'ai cherché d'autres implémentations en ligne, mais je sentais qu'il n'y avait rien de similaire, et je n'ai rien trouvé approprié, alors j'ai essayé d'en définir un et de l'utiliser comme je le pouvais. Premièrement, les rendus
Il y a des bords déchiquetés floues lorsque vous regardez les rendus, ce qui peut être dû à l'influence des pixels, et fonctionner très bien sur les téléphones Android et iOS.
Implémenter le code
En fait, il est très simple à mettre en œuvre. Il calcule principalement la position du curseur. Le glissement utilise la transformation CSS.
Les classes utilisées par CSS sont les suivantes:
.switch_search {position: relatif; affichage: flex; largeur: 120px; hauteur: 28px; marge: 8px; bordure: solide 1px #fff; border-radius: 16px;}. switch_search_tab {flex: 1; hauteur: 28px; largeur: 60px; LINE-HEIGHT: 28PX; COLOR: # 203C4B; Z-Index: 12;}. White_Search_Tab {Color: #fff;}. Switch_BG {Background: #fff; Border-Radius: 16px; Position: Absolute; en haut: -1px; gauche: -1px; hauteur: 28px; largeur: 60px;}. search_right {transition: -webkit-transform, transform 0,6s facilit; -Webkit-transform: tradlate3d (60px, 0, 0); -moz-transform: tradlate3d (60px, 0, 0); transform: tradlate3d (60px, 0, 0);}. search_left {transition: -webkit-transform, transform 0,6s facilit; -Webkit-transform: tradlate3d (0px, 0, 0); -moz-transform: tradlate3d (60px, 0, 0);}. search_left {transition: -webkit-transform, transform 0.6s facilite; -Webkit-transform: tradlate3d (0px, 0, 0); -moz-transform: tradlate3d (0px, 0, 0); -moz-transform: tradlate3d (0px, 0, 0); tradlate3d (0px, 0, 0); Transform: tradlate3d (0px, 0, 0);}Code HTML sur la page:
<div> <div on-swipe-right = "activeSlideSearch (1)" ng-Click = "activeSlideSearch (0)" ng-Class = "(SlideIndexSearch == 0 || SlideIndexSearch == - 1)? '': 'white_search_tab'"> mois </v> <div on-swipe-left = "ActiveSlidesearch (0)" ng-Click = "activeSlidesEarch (1)" ng-Class = "(SlideIndexSearch == 1)? '': 'white_search_tab'"> day </div> <div ng-class = "(slideIndexSearch == 0 || SlideIndexSearch == - 1)? 'Search_left': 'Search_Right' '> </v> </v>
Le code JS du contrôleur correspondant est le suivant:
$ scope.slideIndexSearch = -1; $ scope.activeSlideSearch = function (index) {$ scope.slideIndexSearch = index;};De cette façon, un simple composant à bascule glissant avec des mots peut être implémenté.
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.