Latest web development tutorials

scrollbar ionique

ion-scroll

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

usage 

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

API

propriété type détail
délégué poignée
(Facultatif)
字符串

L'utilisation de la poignée $ionicScrollDelegate désignée vue défilement.

direction
(Facultatif)
字符串

Le sens de défilement. 'X' ou 'y'. Par défaut 'y'.

pagination
(Facultatif)
布尔值

Paging si le défilement.

sur-refresh
(Facultatif)
表达式

Appelez le menu déroulant rafraîchissement par ionRefresher déclencheur.

sur-scroll
(Facultatif)
表达式

Se déclenche lorsque l'utilisateur fait défiler.

scrollbar-x
(Facultatif)
布尔值

Que ce soit pour afficher la barre de défilement horizontal. La valeur par défaut est faux.

scrollbar-y
(Facultatif)
布尔值

Que ce soit pour afficher la barre de défilement vertical. La valeur par défaut est vrai.

zoom
(Facultatif)
布尔值

Il prend en charge deux doigts zoom.

min-zoom
(Facultatif)
整数

Le montant minimum autorisé de mise à l'échelle (par défaut est de 0,5)

max-zoom
(Facultatif)
整数

Le montant maximal admissible de mise à l'échelle (par défaut est 3)

Exemples

Le code HTML 

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

code CSS 

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

code JavaScript 

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

ion-infini-scroll

Lorsque l'utilisateur atteint le voisinage du pied de page ou pied de page, commande ionInfiniteScroll vous permet d'appeler une fonction.

Lorsque l'utilisateur fait défiler la distance au-delà du fond du contenu, il vous déclencher pour spécifier le sur-infini.

usage 

<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 est chargé, vous pouvez utiliser une méthode simple pour empêcher défilement infini, qui est angulaire dans la commande ng-si: 

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

API

propriété type détail
sur-infini 表达式

Lors du défilement dans la partie d'extrémité de l'événement déclencheur.

distance
(Facultatif)
字符串

Faites à partir du bas pour déclencher sur-infinie expressions de distance. Par défaut: 1%.

icône
(Facultatif)
字符串

Icône est affiché lors du chargement. Valeur par défaut: 'ion-chargement-d.

$ IonicScrollDelegate

Autorisation de contrôler la vue de défilement (créé par l'ion-contenu et l'instruction ion-scroll).

La méthode directe est déclenchée le service $ ionicScrollDelegate pour contrôler l'ensemble de la vue de défilement. Contrôle vue de défilement spécifique avec des méthodes $ getByHandle.

usage 

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

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

manière 

resize()

Dites vue de défilement pour recalculer la taille de son conteneur. 

scrollTop([shouldAnimate])
Paramètres type détail
shouldAnimate
(Facultatif)
布尔值

Que ce soit pour appliquer une animation de défilement. 

scrollBottom([shouldAnimate])
Paramètres type détail
shouldAnimate
(Facultatif)
布尔值

Que ce soit pour appliquer une animation de défilement.