Prefacio
Dado que se requiere el componente deslizante de palanca con palabras en el proyecto, Ionic proporciona esto:
Lo que necesita en el proyecto real:
Busqué otras implementaciones en línea, pero sentí que no había nada similar, y no encontré nada adecuado, así que intenté definir una y usarlo como pude. Primero, las representaciones
Hay bordes irregulares borrosos al mirar las representaciones, lo que puede deberse a la influencia de los píxeles, y funcionar muy bien en los teléfonos Android e iOS.
Código de implementación
De hecho, es muy simple de implementar. Calcula principalmente la posición del control deslizante. El deslizamiento utiliza la transformación CSS.
Las clases utilizadas por CSS son las siguientes:
.switch_search {posición: relativa; pantalla: flex; ancho: 120px; altura: 28px; margen-top: 8px; borde: sólido 1px #fff; border-radius: 16px;}. switch_search_tab {flex: 1; altura: 28px; ancho: 60px; Line-Height: 28px; Color:#203C4B; Z-Index: 12;}. White_Search_Tab {color: #fff;}. Switch_bg {Fondo: #fff; border-radius: 16px; posición: absoluto; superior: -1px; izquierda: -1px; altura: 28px; ancho: 60px;}. Search_right {Transition: -Webkit-Transform, transformar 0.6s facilitue; -webkit-transform: traduce3d (60px, 0, 0); -Moz-Transform: traduce3D (60px, 0, 0); transformar: traduce3d (60px, 0, 0);}. Search_left {Transition: -WebKit -Transform, Transform 0.6s facilitue; -webkit-transform: traduce3d (0px, 0, 0); -Moz-Transform: traduce3D (60px, 0, 0);}. Search_left {Transition: -Webkit-Transform, transformar 0.6s facilitan; -webkit-transform: traduce3d (0px, 0, 0); -Moz-Transform: traduce3D (0px, 0, 0); -Moz-Transform: traduce3D (0px, 0, 0); traduce3D (0px, 0, 0); Transform: traduce3D (0px, 0, 0);}Código HTML en la página:
<Div> <div on-swipe-right = "activesslidesearch (1)" ng-click = "activesslidesearch (0)" ng-class = "(slideIndexsearch == 0 || slideIndexSearch ==-1)? '': 'White_Search_Tab'"> mes </viV> <divipe on-swip-tweft = "ActiveSlidesearch (0)" "" ")" ")" ng-chick = "ActiveSlidesearch (1)" ng-class = "(slideIndexSearch == 1)? '': 'White_Search_Tab'"> Day </iv> <div Ng-class = "(slideIndexsearch == 0 || slideIndexSearch ==-1)?
El código JS del controlador correspondiente es el siguiente:
$ scope.slideIndexSearch = -1; $ scope.activeslidesearch = function (index) {$ scope.slideIndexsearch = index;};De esta manera, se puede implementar un componente deslizante simple con palabras.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.