Ionic - Elenco Javascript

Abbiamo già discusso gli elementi dell'elenco CSS di Ionic nei capitoli precedenti. In questo capitolo, ti mostreremo gli elenchi JavaScript. Ci consentono di utilizzare alcune nuove funzionalità comeswipe, drag e remove.

Utilizzo di List

Le direttive utilizzate per visualizzare elenchi e voci sono ion-list e ion-item come mostrato di seguito.

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

Il codice precedente produrrà la seguente schermata:

Pulsante Elimina

Questo pulsante può essere aggiunto utilizzando il ion-delete-buttondirettiva. Puoi usare qualsiasi classe di icone che desideri. Poiché non vogliamo sempre mostrare i pulsanti Elimina, perché gli utenti potrebbero toccarlo accidentalmente e attivare il processo di eliminazione, possiamo aggiungere ilshow-delete attributo al ion-list e collegalo con il ng-model.

Nell'esempio seguente, useremo il ion-togglecome un modello. Quando l'interruttore è su Elimina, i pulsanti appariranno sulle voci della nostra 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>

Il codice precedente produrrà la seguente schermata:

Pulsante Riordina

La direttiva Ionic per il pulsante di riordino è ion-reorder-button. L'elemento che abbiamo creato ha un'estensioneon-reorder attributo che attiverà la funzione dal nostro controller ogni volta che l'utente trascina questo 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);
};

Il codice precedente produrrà la seguente schermata:

Quando facciamo clic sull'icona a destra, possiamo trascinare l'elemento e spostarlo in un altro punto dell'elenco.

Pulsante di opzione

Il pulsante Opzione viene creato utilizzando un file ion-option-buttondirettiva. Questi pulsanti vengono visualizzati quando l'elemento dell'elenco viene spostato a sinistra e possiamo nasconderlo di nuovo facendo scorrere l'elemento dell'elemento verso destra.

Nell'esempio seguente puoi vedere che ci sono due pulsanti, che sono nascosti.

<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>

Il codice precedente produrrà la seguente schermata:

Quando facciamo scorrere l'elemento dell'elemento verso sinistra, il testo verrà spostato a sinistra e i pulsanti appariranno sul lato destro.

Altre funzioni

Il collection-repeat è una versione aggiornata di AngularJS ng-repeat directive. Renderà solo gli elementi visibili sullo schermo e il resto verrà aggiornato durante lo scorrimento. Si tratta di un importante miglioramento delle prestazioni quando si lavora con elenchi di grandi dimensioni. Questa direttiva può essere combinata conitem-width e item-height attributi per un'ulteriore ottimizzazione degli elementi dell'elenco.

Ci sono altri attributi utili per lavorare con le immagini all'interno del tuo elenco. Ilitem-render-bufferla funzione rappresenta il numero di elementi che vengono caricati dopo gli elementi visibili. Più alto è questo valore, più elementi verranno precaricati. Ilforce-refresh-imagesLa funzione risolverà un problema con l'origine delle immagini durante lo scorrimento. Entrambe queste classi influenzeranno la performance in modo negativo.