O componente Slide-Box do Ionic é usado para implementar uma guia deslizante. Ele monitora principalmente os cliques da guia e os eventos deslizantes da página de slide e os lida de acordo. Use Loops NG-Repeat para otimizar e simplificar o código. Os alunos necessitados podem dar uma olhada.
Vamos levar uma renderização primeiro:
O código CSS usado:
.tab_default {borda-bottom: sólido 1px #f2f2f2; preenchimento: 6px 0;}. tab_select {borda-bottom: sólido 1px #3e89f5; Box-Shadow: 0 -3px 8px #C1D3F0 Inset;}. Arrow-top {Position: Absolute; largura: 0; altura: 0; topo: 20px; fronteira: 6px Solid #3E89F5; cor-direita: transparente; cor de borda-esquerda: transparente; Border-top-Color: transparent;}. Arrow-top: após {content: ''; Posição: Absoluto; largura: 0; altura: 0; borda: 12px sólido #fff; Direita: -12px; Inferior: -13px; cor-direita: transparente; cor de borda-esquerda: transparente; cor-de-borda: transparente;}Código HTML na página:
<ION-View View-title = "Tab Sliding"> <ION-Content Has-Buncing = "False"> <div style = "Display: Flex; Largura: 100%;"> <Div Style = "Flex: 1; Text-Align: Center;" ng-repeat="d in tabNames" ng-click="activeSlide($index)" ng-class="slectIndex==$index ? 'tab_select' : '' "> {{d}} <div style="left:{{15+$index*33}}%" ng-show="slectIndex==$index"></div> </div> </div> <ion-slide-box em slide-traseiro = "SlideChanged (Index)" ativo-slide = "slideIndex" Do-continue = "false" show-pager = "false"> <ion-slide ng-repeat = "p em páginas"> <div ng-include = "p"> </Div> </onso-content> </on-view>Código do Controller.js correspondente:
$ scope.tabnames = ['java', 'html5', 'Android']; $ scope.sLectIndex = 0; $ scope.activeslide = function (index) {// acionamento ao clicar em $ scope.slectindex = index; $ ionicslideboxDelegate.slide (index);}; $ scope.slidechanged = function (index) {// dispara ao deslizar $ scope.slectIndex = index;}; $ scope.pages = ["modelos" "";Tab01.html, tab02.html, tab03.html são todos semelhantes. Publique um tab01:
<div> página 01 <p style = "margin-top: 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
Observação:
• Ao clicar, atribua o índice $ índice do loop atual ao variável slideIndex. Use a classe ng na guia para determinar se o índice e o slideIndex são os mesmos ao clicar. Se o mesmo for verdadeiro, altere o estilo da guia correspondente;
• Quando deslizando, uma função da caixa de slide é usada, muda em troca. Quando a página do slide é alterada, um índice variável será passado para a função de mudança para identificar o índice do slide atual;
• Se você não deseja rolar e apenas clicar, poderá remover a escuta em mudança ou adicionar uma propriedade, desabilitar-scroll = "true" e proibir a rolagem da página de slide;
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.