El mejor tutorial de barra de desplazamiento iónica en 2024. En este tutorial podrás aprender ión-scroll,ión-infinito-scroll,$ IonicScrollDelegate,
iones de desplazamiento se utiliza para crear un contenedor desplazable.
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> es. </ion-scroll>
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) |
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('es/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
body { cursor: url('es/try/demo_source/finger.png'), auto; }
angular.module('ionicApp', ['ionic']);
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.
<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>
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'. |
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.
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
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. |