Ionic Scroll

ion-scroll

ion-scroll est utilisé pour créer un conteneur défilable.

Utilisation

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

API

Attributes Type Détails
delegate-handle
(Facultatif)
 string

Le handle est utilisé pour$ionicScrollDelegatespécifier la vue de défilement.
direction
(Facultatif)
 string

La direction du défilement. 'x' ou 'y'. Par défaut : 'y'.
paging
(Facultatif)
 boolean

Indique si le défilement se fait avec pagination.
on-refresh
(Facultatif)
 expression

Appelé lorsqu'un rafraîchissement par glissement estionRefresherdéclenché.
on-scroll
(Facultatif)
 expression

Déclenché lorsque l'utilisateur fait défiler.
scrollbar-x
(Facultatif)
 boolean

Indique s'il faut afficher la barre de défilement horizontale. Valeur par défaut : false.
scrollbar-y
(Facultatif)
 boolean

Indique s'il faut afficher la barre de défilement verticale. Valeur par défaut : true.
zooming
(Facultatif)
 boolean

Indique s'il faut prendre en charge le zoom par pincement (avec deux doigts).
min-zoom
(Facultatif)
 integer

L'échelle minimale autorisée (valeur par défaut : 0.5)
max-zoom
(Facultatif)
 integer

L'échelle maximale autorisée (valeur par défaut : 3)

Exemple

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

Code CSS

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

Code JavaScript

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

ion-infinite-scroll

La directive ionInfiniteScroll vous permet d'appeler une fonction lorsque l'utilisateur atteint ou est proche du pied de page.

Lorsque l'utilisateur fait défiler au-delà du bas du contenu, l'événement on-infinite que vous spécifiez est déclenché.

Utilisation

<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();
  });
}

Lorsqu'il n'y a plus de données à charger, vous pouvez utiliser une méthode simple pour arrêter le défilement infini : la directive ng-if d'Angular :

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

API

Attributes Type Détails
on-infinite expression

L'événement déclenché lors du défilement jusqu'en bas.
distance
(Facultatif)
 string

La distance depuis le bas pour déclencher l'expression on-infinite. Par défaut : 1%.
icon
(Facultatif)
 string

L'icône à afficher pendant le chargement. Par défaut : 'ion-loading-d'.

$ionicScrollDelegate

Déléguer le contrôle des vues de défilement (créées via les directives ion-content et ion-scroll).

Cette méthode est directement invoquée par le service $ionicScrollDelegate pour contrôler toutes les vues de défilement. Utilisez la méthode $getByHandle pour contrôler une vue de défilement spécifique.

Utilisation

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

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

Méthodes

resize()

Indiquez à la vue de défilement de recalculer la taille de son conteneur.

scrollTop([shouldAnimate])
Parameters Type Détails
shouldAnimate
(Facultatif)
 boolean

Indique s'il faut appliquer une animation de défilement.

 
scrollBottom([shouldAnimate])
Parameters Type Détails
shouldAnimate
(Facultatif)
 boolean

Indique s'il faut appliquer une animation de défilement.
Autres extensions