Refrescando contenido en una pantalla

Alexander A. Ramírez M.

Una de las actividades frecuentes en una pantalla de una aplicación móvil es la actualización de contenido. Para ello Ionic provee la directiva ionRefresher.

Partiendo el tutorial anterior vamos a hacer una modificación para mostrar la manera de utilizar Pull to Refresh en una pantalla con una lista..

Ingrese a play.ionic.io para obtener el código para iniciar el tutorial y haga FORK. No olvide hacer FORK.

El objetivo es actualizar la lista con nuevos elementos cada vez que se desliza la lista con un gesto hacia abajo (Pull to Refresh).

En el HTML hay que agregar el tag ion-refresher luego del tag ion-content.

<ion-content ng-controller="contentController">
  <ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doListUpdate()">
  </ion-refresher>
<ion-list>

Luego modifique el controlador y agregue la definición de la función doListUpdate.

$scope.doListUpdate = function() {
  var newItemId = $scope.items[0].id + "1";
  $scope.items.unshift({ id: newItemId });
  $scope.$broadcast('scroll.refreshComplete');
};

Ahora en la lista haga el gesto de actualización (Pull to refresh) y observe el comportamiento.

Ahora como ejercicio adicional siga la documentación de la directiva ion-refresher y utilice los atributos adicionales para agregar un ícono distinto.

Puede verificar el resultado final si lo desea.