El componente de la caja de diapositivas de IONIC se utiliza para implementar una pestaña deslizable. Principalmente monitorea los clics de la pestaña y los eventos deslizantes de la página deslizan, y los maneja en consecuencia. Use bucles Ng-Repeat para optimizar y simplificar el código. Los estudiantes necesitados pueden echar un vistazo.
Tomemos una renderización primero:
El código CSS utilizado:
.tab_default {border-bottom: sólido 1px #f2f2f2; Pading: 6px 0;}. Tab_Select {Border-Bottom: Solid 1px #3E89F5; box-shadow: 0 -3px 8px #c1d3f0 inset;}. flecha-top {posición: absoluta; Ancho: 0; Altura: 0; Arriba: 20px; borde: 6px Solid #3E89F5; Border-derecho-color: transparente; color de la izquierda fronteriza: transparente; border-top-color: transparent;}. Arrow-top: After {content: ''; Posición: Absoluto; Ancho: 0; Altura: 0; borde: 12px sólido #fff; Derecha: -12px; Abajo: -13px; Border-derecho-color: transparente; color de la izquierda fronteriza: transparente; border-top-color: transparent;}Código HTML en la página:
<ion-view view-title = "pestaña deslizante"> <ion-content ha-buncing = "false"> <div style = "display: flex; ancho: 100%;"> <div style = "flex: 1; text-align: centro;" ng-repeat = "d en Tabnames" ng-chick = "activeslide ($ index)" ng-class = "slectIndex == $ index? 'tab_select': '' '"> {{d}}} <div style = "izquierda: {{15+$ index*33}%" ng-show = "slectindex == $ índice"> <divs divir <ion-slide-box on-slide-changed = "slidechanged (index)" activo-slide = "slideIndex" does-continue = "false" show-pager = "false"> <ion-slide ng-depheat = "p en las páginas"> <div -include = "p"> </div> </ ion-slide> </ion-s-sellide-boxe-boxe> </ion-content> </ion-view>Código de controlador.js correspondiente:
$ scope.tabnames = ['java', 'html5', 'android']; $ scope.slectIndex = 0; $ scope.activeslide = function (index) {// desencadenar al hacer clic en $ scope.slectindex = index; $ ionicslideBoxDelegate.slide (index);}; $ scope.slideChanged = function (index) {// desencadenar cuando se desliza $ scope.slectindex = index;}; $ scope.pages = ["plantplates/tab01.html", "Templates/tab02.html", "Templates/tab03.html"];Tab01.html, TAB02.html, TAB03.html son todos similares. Publicar una pestaña 01:
<div> página 01 <p style = "margin-top: 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
Nota:
• Al hacer clic, asigne el índice $ índice del bucle actual a la variable slideIndex. Use la clase NG en la pestaña para determinar si el índice y el slideIndex son los mismos al hacer clic. Si lo mismo es verdadero, cambie el estilo de la pestaña correspondiente;
• Al deslizarse, se usa una función de la caja deslizante, cambiada en el deslizamiento. Cuando cambia la página de diapositivas, se pasará un índice variable a la función de cambio para identificar el índice de la diapositiva actual;
• Si no desea desplazarse y simplemente hacer clic, puede eliminar la escucha cambiada en el deslizamiento o agregar una propiedad, deshabilitar-scroll = "true" y prohibir el desplazamiento de la página de diapositivas;
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.