Ionic - Lista de JavaScript

Ya discutimos los elementos de la lista de CSS de Ionic en los capítulos anteriores. En este capítulo, le mostraremos listas de JavaScript. Nos permiten utilizar algunas funciones nuevas comoswipe, drag y remove.

Usando la lista

Las directivas utilizadas para mostrar listas y elementos son ion-list y ion-item Como se muestra abajo.

<ion-list>
   <ion-item>
      Item 1 
   </ion-item>
	
   <ion-item>
      Item 2 
   </ion-item>
	
   <ion-item>
      Item 3  
   </ion-item>
</ion-list>

El código anterior producirá la siguiente pantalla:

Botón Eliminar

Este botón se puede agregar usando el ion-delete-buttondirectiva. Puede utilizar cualquier clase de icono que desee. Dado que no siempre queremos mostrar los botones de eliminación, porque los usuarios pueden tocarlos accidentalmente y activar el proceso de eliminación, podemos agregar elshow-delete atribuir a la ion-list y conectarlo con el ng-model.

En el siguiente ejemplo, usaremos el ion-togglecomo modelo. Cuando el interruptor está en eliminar, los botones aparecerán en los elementos de nuestra lista.

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>
	
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

El código anterior producirá la siguiente pantalla:

Botón Reordenar

La directiva Ionic para el botón de reorden es ion-reorder-button. El elemento que creamos tiene unon-reorder atributo que activará la función desde nuestro controlador cada vez que el usuario arrastre este elemento.

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon" 
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
   </ion-item>
</ion-list>

$scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) {
   $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

El código anterior producirá la siguiente pantalla:

Cuando hacemos clic en el icono de la derecha, podemos arrastrar el elemento y moverlo a otro lugar de la lista.

Botón de opción

El botón Opción se crea usando un ion-option-buttondirectiva. Estos botones se muestran cuando el elemento de la lista se desliza hacia la izquierda y podemos ocultarlo nuevamente deslizando el elemento hacia la derecha.

Puede ver en el siguiente ejemplo que hay dos botones, que están ocultos.

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

El código anterior producirá la siguiente pantalla:

Cuando deslizamos el elemento del elemento hacia la izquierda, el texto se moverá hacia la izquierda y aparecerán botones en el lado derecho.

Otras funciones

los collection-repeat La función es una versión actualizada de la AngularJS ng-repeat directive. Solo mostrará los elementos visibles en la pantalla y el resto se actualizará a medida que se desplaza. Esta es una mejora importante del rendimiento cuando trabaja con listas grandes. Esta directiva se puede combinar conitem-width y item-height atributos para una mayor optimización de los elementos de la lista.

Hay algunos otros atributos útiles para trabajar con imágenes dentro de su lista. lositem-render-bufferLa función representa el número de elementos que se cargan después de los elementos visibles. Cuanto mayor sea este valor, más elementos se precargarán. losforce-refresh-imagesLa función solucionará un problema con la fuente de las imágenes mientras se desplaza. Ambas clases influirán negativamente en el rendimiento.