barra de desplazamiento iónica
ión-scroll
iones de desplazamiento 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
| propiedad | tipo | detalle |
|---|---|---|
| delegado mango (Opcional) | 字符串 | El uso mango |
| dirección (Opcional) | 字符串 | La dirección de desplazamiento. "X" o "Y". Por defecto 'y'. |
| paginación (Opcional) | 布尔值 | La paginación si el desplazamiento. |
| en-refresh (Opcional) | 表达式 | Llame a la actualización desplegable por |
| sobre-desplazamiento (Opcional) | 表达式 | Se activa cuando el usuario se desplaza. |
| barra de desplazamiento-x (Opcional) | 布尔值 | Si se desea mostrar la barra de desplazamiento horizontal. El valor por defecto es falso. |
| barra de desplazamiento-y (Opcional) | 布尔值 | Ya sea para mostrar la barra de desplazamiento vertical. El valor por defecto es cierto. |
| zoom (Opcional) | 布尔值 | Es compatible con el zoom con dos dedos. |
| min-zoom (Opcional) | 整数 | La cantidad mínima admisible de escala (por defecto es 0.5) |
| max-zoom (Opcional) | 整数 | La cantidad máxima permitida de escala (por defecto es 3) |
Ejemplos
código 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>
código CSS
body {
cursor: url('../try/demo_source/finger.png'), auto;
}
código JavaScript
angular.module('ionicApp', ['ionic']);
ión-infinito-scroll
Cuando el usuario llega a la proximidad del pie o pie de página, el comando ionInfiniteScroll le permite llamar a una función.
Cuando el usuario se desplaza la distancia más allá de la parte inferior del contenido, se disparará especificar el sobre-infinito.
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 se carga no hay más datos, se puede utilizar un método simple para evitar desplazamiento infinito, es decir angular en el comando ng-si:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
| propiedad | tipo | detalle |
|---|---|---|
| on-infinito | 表达式 | Cuando se desplace en la parte final del evento de disparo. |
| distancia (Opcional) | 字符串 | Desplazarse desde el fondo para disparar en-infinita expresiones distancia. Por defecto: 1%. |
| icono (Opcional) | 字符串 | Icono aparece cuando se carga. Por defecto: 'iones de carga-d'. |
$ IonicScrollDelegate
Autorización controlar la vista de desplazamiento (creado por iones de contenido e instrucción de iones de desplazamiento).
El método directo se activa el servicio $ ionicScrollDelegate para controlar la totalidad de la vista de desplazamiento. Control de vista de desplazamiento específico con métodos $ getByHandle.
uso
<body ng-controller="MainCtrl">
<ion-content>
<button ng-click="scrollTop()">滚动到顶部!</button>
</ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
}
camino
resize()
Dile a la vista de desplazamiento para volver a calcular su tamaño del contenedor.
scrollTop([shouldAnimate])
| parámetros | tipo | detalle |
|---|---|---|
| shouldAnimate (Opcional) | 布尔值 | Si se debe aplicar la animación de desplazamiento. |
scrollBottom([shouldAnimate])
| parámetros | tipo | detalle |
|---|---|---|
| shouldAnimate (Opcional) | 布尔值 | Si se debe aplicar la animación de desplazamiento. |