Ionic - JavaScript Scroll

O elemento usado para a manipulação de rolagem em aplicativos iônicos é chamado de ion-scroll.

Usando Scroll

Os fragmentos de código a seguir criarão contêineres roláveis ​​e ajustarão os padrões de rolagem. Primeiro, vamos criar nosso elemento HTML e adicionar propriedades a ele. Vamos adicionar →direction = "xy"para permitir a rolagem para todos os lados. Também definiremos a largura e a altura do elemento de rolagem.

Código HTML

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

Em seguida, vamos adicionar a imagem do nosso mapa mundial para div elemento, que criamos dentro do ion-scroll e defina sua largura e altura.

Código CSS

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

Quando executamos nosso aplicativo, podemos rolar o mapa em todas as direções. O exemplo a seguir mostra a parte da América do Norte do mapa.

Podemos rolar este mapa para qualquer parte que quisermos. Vamos rolar para mostrar a Ásia.

Existem outros atributos, que podem ser aplicados ao ion-scroll. Você pode verificá-los na tabela a seguir.

Atributos de rolagem

Atributo	Tipo	Detalhes
direção	corda	Possíveis direções do pergaminho. O valor padrão éy
delegate-handle	corda	Usado para identificação de pergaminho com $ionicScrollDelegate.
trancando	boleano	Usado para bloquear a rolagem em uma direção por vez. O valor padrão é verdadeiro.
paginação	boleano	Usado para determinar se a paginação será usada com rolagem.
atualizar	expressão	Chamado em puxar para atualizar.
na rolagem	expressão	Chamado ao rolar.
barra de rolagem-x	boleano	Deve ser exibida uma barra de rolagem horizontal. O valor padrão é verdadeiro.
barra de rolagem	corda	Deve ser exibida uma barra de rolagem vertical. O valor padrão é verdadeiro.
ampliando	boleano	Usado para aplicar pinch-to-zoom.
min-zoom	inteiro	Valor mínimo de zoom.
zoom máximo	inteiro	Valor máximo de zoom.
barra de rolagem-x	boleano	Usado para ativar o salto. O valor padrão no IOS é verdadeiro, no Android é falso.

Rolagem infinita

Uma rolagem infinita é usada para acionar algum comportamento quando a rolagem passa pela parte inferior da página. O exemplo a seguir mostra como isso funciona. Em nosso controlador, criamos uma função para adicionar itens à lista. Esses itens serão adicionados quando um pergaminho passar de 10% do último elemento carregado. Isso continuará até atingirmos 30 elementos carregados. Cada vez que o carregamento termina,on-infinite vai transmitir scroll.infiniteScrollComplete evento.

Código HTML

<ion-list>
   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" 
   distance = "10%"></ion-infinite-scroll>

Código do Controlador

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;
   
   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length}); 

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;
      }
   
      $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

Outros atributos também podem ser usados ​​com ion-infinite-scroll. Alguns deles estão listados na tabela abaixo.

Atributos de rolagem

Atributo	Tipo	Detalhes
no infinito	expressão	O que deve ser chamado quando rolado para a parte inferior.
distância	corda	A distância do fundo necessária para desencadear uma expressão infinita.
spinner	corda	Qual spinner deve ser mostrado durante o carregamento
verificação imediata	boleano	Deve 'on-infinite' ser chamado quando a tela é carregada

Delegado de rolagem

Ionic oferece delegado para controle total dos elementos de rolagem. Pode ser usado injetando um$ionicScrollDelegate serviço ao controlador e, em seguida, use os métodos que ele fornece.

O exemplo a seguir mostra uma lista rolável de 20 objetos.

Código HTML

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

Código do Controlador

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

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

O código acima irá produzir a seguinte tela -

Quando tocamos no botão, a rolagem será movida para o topo.

Agora, vamos percorrer todos os $ionicScrollDelegate métodos.

Métodos de delegação

Método	Parâmetros	Tipo	Detalhes
scrollTop (parâmetro)	deveriaAnimar	boleano	Deve rolar ser animado.
scrollBottom (parâmetro)	deveriaAnimar	boleano	Deve rolar ser animado.
scrollTo (parâmetro1, parâmetro2, parâmetro3)	esquerda, topo, deveAnimar	número, número, inteiro	Os primeiros dois parâmetros determinam o valor do deslocamento do eixo xey.
scrollBy (parâmetro1, parâmetro2, parâmetro3)	esquerda, topo, deveAnimar	número, número, inteiro	Os primeiros dois parâmetros determinam o valor do deslocamento do eixo xey.
zoomTo (parâmetro1, parâmetro2, parâmetro3, parâmetro4)	level, animate, originLeft, originTop	número, booleano, número, número	level é usado para determinar o nível de zoom. originLeft e originRight coordenadas onde o zoom deve acontecer.
zoomBy (parâmetro1, parâmetro2, parâmetro3, parâmetro4)	fator, animação, originLeft, originTop	número, booleano, número, número	factor é usado para determinar o fator de zoom. originLeft e originRight coordenadas onde o zoom deve acontecer.
getScrollPosition ()	/	/	Retorna o objeto com dois números como propriedades: left e right. Esses números representam a distância que o usuário rolou da esquerda e do topo, respectivamente.
anchorScroll (parâmetro1)	deveriaAnimar	boleano	Ele rolará para o elemento com o mesmo id que o window.loaction.hash. Se este elemento não existir, ele rolará para o topo.
freezeScroll (parâmetro1)	deve congelar	boleano	Usado para desativar a rolagem para uma rolagem específica.
freezeAllScrolls (parâmetro1)	deve congelar	boleano	Usado para desabilitar a rolagem para todos os pergaminhos no aplicativo.
getScrollViews ()	/	objeto	Retorna o objeto scrollView.
$ getByHandle (parâmetro1)	lidar com	corda	Usado para conectar métodos à visualização de rolagem específica com a mesma alça. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();