barre de défilement ionique
ion-scroll
ion-scroll est utilisé pour créer un conteneur déroulant.
Utilisation
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ... </ion-scroll>
API
| Attributs | Type< /th> | Détails | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| delegate-handle (facultatif) < / td> | String |
$ionicScrollDelegate pour spécifier la vue de défilement. | |||||||||||||||||||||||||||||||||
| direction (facultatif) | Chaîne | Le sens de défilement. 'x' ou 'y'. La valeur par défaut est « y ». | |||||||||||||||||||||||||||||||||
| pagination (facultatif) | Valeur booléenne | Si la pagination défile. | |||||||||||||||||||||||||||||||||
| à l'actualisation (facultatif) | Expression | Actualisation déroulante de l'appel, déclenchée par ionRefresher. | |||||||||||||||||||||||||||||||||
| par défilement (facultatif) | Expression | Déclenché lorsque l'utilisateur fait défiler. | |||||||||||||||||||||||||||||||||
| scrollbar-x (facultatif) | Valeur booléenne < /code> | S'il faut afficher la barre de défilement horizontale. La valeur par défaut est fausse. | |||||||||||||||||||||||||||||||||
| barre de défilement-y (facultatif) | Valeur booléenne < /code> | S'il faut afficher la barre de défilement verticale. La valeur par défaut est vraie. | |||||||||||||||||||||||||||||||||
| zoom (facultatif) | Valeur booléenne | S'il faut prendre en charge le zoom à deux doigts. | |||||||||||||||||||||||||||||||||
| min-zoom (facultatif) | entier< / code> | Zoom minimum autorisé (la valeur par défaut est 0,5) | |||||||||||||||||||||||||||||||||
| max-zoom ( Facultatif)< /em> | Entier | Le montant maximum de mise à l'échelle autorisé (la valeur par défaut est 3)< /td> |
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('../style/images/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
Code CSS| 属性 | 类型 | 详情 |
|---|---|---|
| on-infinite | 表达式 | 当滚动到底部时触发的事件。 |
| distance (可选) | 字符串 | 从底部滚动到触发on-infinite表达式的距离。默认: 1%。 |
| icon (可选) | 字符串 | 当加载时显示的图标。默认: 'ion-loading-d'。 |
body {
cursor: url('../style/images/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 s'approche du pied de page. <🎜><🎜>Lorsque l'utilisateur fait défiler au-delà du contenu inférieur, l'activation infinie que vous spécifiez sera déclenchée. <🎜><🎜>Utilisation<🎜><ion-content ng-controller="MyController"> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content>rrree<🎜>Quand plus aucune donnée n'est chargée, il existe un moyen simple d'empêcher le défilement infini, c'est la directive ng-if d'Angular : <🎜>
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();
});
}<🎜>API <🎜> | Propriétés | Type | Détails |
|---|---|---|
| on-infinite | Expression | <🎜>Événement déclenché lors du défilement vers le bas. <🎜> |
| distance (facultatif) | Chaîne | <🎜>Faites défiler depuis le bas pour déclencher l'expression on-infinite. Par défaut : 1 %. <🎜> |
| icône (facultatif) | Chaîne | <🎜>L'icône affichée lors du chargement. Par défaut : 'ion-loading-d'. <🎜> |
$ionicScrollDelegate
Délègue le contrôle de la vue de défilement (créée via les directives ion-content et ion-scroll).
Cette méthode est directement déclenché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
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
Méthode
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
}indique à la vue déroulante de recalculer la taille de son conteneur.
resize()
| Paramètre | Type | Détails | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| shouldAnimate (facultatif)
| Valeur booléenne |
|
scrollTop([shouldAnimate])
| Paramètres | Tapez | Détails |
|---|---|---|
| shouldAnimate (facultatif)<🎜> Valeur booléenne<🎜>S'il faut appliquer une animation de défilement. <🎜> | |
