Prefácio
Como o componente deslizante de alternância com as palavras é necessário no projeto, a Ionic fornece isso:
O que você precisa no projeto real:
Procurei outras implementações on -line, mas senti que não havia nada parecido e não encontrei nada adequado, então tentei definir um e usá -lo o possível. Primeiro, as renderizações
Há bordas irregulares embaçadas ao olhar para as renderizações, que podem ser devido à influência de pixels, e um desempenho muito suave nos telefones Android e iOS.
Implementar código
De fato, é muito simples de implementar. Calcula principalmente a posição do controle deslizante. O deslizamento usa a transformação CSS.
As classes usadas pelo CSS são as seguintes:
.Switch_Search {Position: relativo; display: flex; largura: 120px; altura: 28px; margem-top: 8px; borda: sólido 1px #fff; radio de borda: 16px;}. switch_search_tab {flex: 1; altura: 28px; largura: 60px; altura de linha: 28px; cor:#203C4b; z-index: 12;}. white_search_tab {color: #fff;}. switch_bg {background: #fff; radius de borda: 16px; posição: absoluto; topo: -1px; esquerda: -1px; altura: 28px; largura: 60px;}. Search_right {transição: -webkit-transform, transform 0,6s facilidade; -webkit-transform: tradutor3d (60px, 0, 0); -moz-transform: tradutor3d (60px, 0, 0); Transform: Tradlate3d (60px, 0, 0);}. Search_left {transição: -Webkit -transform, transform 0,6s facilidade; -webkit-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (60px, 0, 0);}. Search_left {transição: -webkit-transform, transform 0,6s facilidade; -webkit-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (0px, 0, 0); tradução3d (0px, 0, 0); Transformar: tradutor3d (0px, 0, 0);}Código HTML na página:
<div> <div on-swipe-right = "ActiveSlideSearch (1)" ng-click = "ActiveSlideSearch (0)" ng-class = "(slideIndexSearch == 0 || slideIndexsearch ==-1)? ng-click = "ActiveSlideSearch (1)" ng-class = "(slideIndexSearch == 1)?
O código JS do controlador correspondente é o seguinte:
$ scope.slideIndexSearch = -1; $ scope.ActiveslideSearch = function (index) {$ scope.slideIndexSearch = index;};Dessa forma, um simples componente de alternância deslizante com palavras pode ser implementado.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.