Latest web development tutorials

barra de rolagem iônica

ion-scroll

ion-scroll é usado para criar um recipiente de rolagem.

uso 

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

API

propriedade tipo detalhe
delegado-handle
(Opcional)
字符串

O uso alça $ionicScrollDelegate designada exibição de rolagem.

direção
(Opcional)
字符串

A direção do deslocamento. 'X' ou 'y'. Default 'y'.

paginação
(Opcional)
布尔值

Paginação se a rolagem.

on-refresh
(Opcional)
表达式

Chamar a atualização suspensa por ionRefresher gatilho.

on-scroll
(Opcional)
表达式

É acionado quando o usuário rola.

barra de rolagem-x
(Opcional)
布尔值

Se deseja exibir barra de rolagem horizontal. O padrão é falso.

barra de rolagem-y
(Opcional)
布尔值

Se é para exibir a barra de rolagem vertical. O padrão é verdadeiro.

zoom
(Opcional)
布尔值

Ele suporta zoom com dois dedos.

min-zoom
(Opcional)
整数

O valor mínimo permitido de escalonamento (o padrão é 0,5)

max-zoom
(Opcional)
整数

O valor máximo permitido de escalonamento (o padrão é 3)

Exemplos

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']);

ion-infinita-scroll

Quando o usuário chega à proximidade do rodapé ou rodapé, comando ionInfiniteScroll permite que você chamar uma função.

Quando o usuário rola a distância além da parte inferior do conteúdo, ele irá acionar a você especificar o on-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();
  });
}

Quando não houver mais dados são carregados, você pode usar um método simples para evitar a rolagem infinita, que é angular na ng-se o comando: 

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

API

propriedade tipo detalhe
no infinito 表达式

Ao deslocar-se na parte final do evento de disparo.

distância
(Opcional)
字符串

Rolar a partir do fundo para desencadear on-infinita expressões distância. Padrão: 1%.

ícone
(Opcional)
字符串

Ícone é exibido durante o carregamento. Padrão: 'de iões de lítio de carregamento d'.

$ IonicScrollDelegate

Autorização controlar a exibição de rolagem (criado por ion-content e instrução ion-scroll).

O método direto é acionado serviço $ ionicScrollDelegate para controlar toda a exibição de rolagem. Controlar exibição de rolagem específico com 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();
  };
}

caminho 

resize()

Diga exibição de rolagem para recalcular o tamanho do recipiente. 

scrollTop([shouldAnimate])
parâmetros tipo detalhe
shouldAnimate
(Opcional)
布尔值

Se deve aplicar animação de rolagem. 

scrollBottom([shouldAnimate])
parâmetros tipo detalhe
shouldAnimate
(Opcional)
布尔值

Se deve aplicar animação de rolagem.