Barra de desplazamiento de ionic

ion-scroll

ion-scroll se utiliza para crear un contenedor desplazable.

Uso

<ion-scroll
    [delegate-handle=""]
    [direction=""]
    [paging=""]
    [on-refresh=""]
    [on-scroll=""]
    [scrollbar-x=""]
    [scrollbar-y=""]
    [zooming=""]
    [min-zoom=""]
    [max-zoom=""]>
    ...
</ion-scroll>

API

Atributos Tipo Detalles
delegate-handle
(Opcional)
 cadena

Este identificador se utiliza$ionicScrollDelegatepara especificar la vista de desplazamiento.
direction
(Opcional)
 cadena

Dirección del desplazamiento. 'x' o 'y'. Por defecto 'y'.
paging
(Opcional)
 booleano

Si el desplazamiento es por páginas.
on-refresh
(Opcional)
 expresión

Llamar a la actualización desplegable, activada porionRefresherel disparador.
on-scroll
(Opcional)
 expresión

Se dispara cuando el usuario se desplaza.
scrollbar-x
(Opcional)
 booleano

Si se muestra la barra de desplazamiento horizontal. Por defecto es false.
scrollbar-y
(Opcional)
 booleano

Si se muestra la barra de desplazamiento vertical. Por defecto es true.
zooming
(Opcional)
 booleano

Si se admite el zoom con dos dedos.
min-zoom
(Opcional)
 entero

Cantidad mínima de zoom permitida (por defecto 0.5)
max-zoom
(Opcional)
 entero

Cantidad máxima de zoom permitida (por defecto 3)

Ejemplo

Código HTML

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; background: url('http://www.example.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

Código CSS

body {
  cursor: url('http://www.example.com/try/demo_source/finger.png'), auto;
}

Código JavaScript

angular.module('ionicApp', ['ionic']);

ion-infinite-scroll

Cuando el usuario llega al pie de página o cerca de él, la directiva ionInfiniteScroll te permite llamar a una función.

Cuando la distancia de desplazamiento del usuario supera el contenido inferior, se activa el on-infinite que hayas especificado.

Uso

<ion-content ng-controller="MyController">
  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

function MyController($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('/more-items').success(function(items) {
      useItems(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

Cuando no hay más datos que cargar, se puede usar un método sencillo para detener el desplazamiento infinito: la directiva ng-if de Angular.

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

Atributos Tipo Detalles
on-infinite expresión

Evento que se dispara al desplazarse hasta el final.
distance
(Opcional)
 cadena

Distancia desde la parte inferior hasta que se dispara la expresión on-infinite. Por defecto: 1%.
icon
(Opcional)
 cadena

Icono que se muestra mientras se carga. Por defecto: 'ion-loading-d'.

$ionicScrollDelegate

Autoriza el control de las vistas de desplazamiento (creadas mediante las directivas ion-content e ion-scroll).

Este método se activa directamente mediante el servicio $ionicScrollDelegate para controlar todas las vistas de desplazamiento. Utiliza el método $getByHandle para controlar una vista de desplazamiento específica.

Uso

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

Métodos

resize()

Indica a la vista de desplazamiento que vuelva a calcular el tamaño de su contenedor.

scrollTop([shouldAnimate])
Parámetros Tipo Detalles
shouldAnimate
(Opcional)
 booleano

Si se aplica la animación de desplazamiento.

 
scrollBottom([shouldAnimate])
Parámetros Tipo Detalles
shouldAnimate
(Opcional)
 booleano

Si se aplica la animación de desplazamiento.
Otras extensiones