Latest web development tutorials

jonowe przewijania

jon-scroll

jonów przewijania jest używany do tworzenia przewijalną pojemnik.

zwyczaj 

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

API

nieruchomość typ detal
Delegat rękojeść
(Opcjonalnie)
字符串

Zastosowanie uchwytu $ionicScrollDelegate wyznaczony widok przewijania.

kierunek
(Opcjonalnie)
字符串

Kierunek przewijania. "X" lub "Y". Domyślnie 'y'.

stronicowania
(Opcjonalnie)
布尔值

Stronicowanie czy przewijanie.

na odświeżenie
(Opcjonalnie)
表达式

Zadzwoń do odświeżenia rozwijanej poprzez ionRefresher spuście.

na zwoju
(Opcjonalnie)
表达式

Odpala, gdy użytkownik przewija.

przewijania-x
(Opcjonalnie)
布尔值

Czy do wyświetlania poziomego paska przewijania. Wartością domyślną jest false.

przewijania-y
(Opcjonalnie)
布尔值

Niezależnie od tego, aby wyświetlić pionowy pasek przewijania. Domyślnie jest to prawda.

powiększanie
(Opcjonalnie)
布尔值

Obsługuje dwoma palcami zoom.

min-zoom
(Opcjonalnie)
整数

Minimalna dopuszczalna wysokość skalowania (domyślnie 0.5)

max-zoom
(Opcjonalnie)
整数

Maksymalna dopuszczalna ilość skalowania (domyślnie 3)

Przykłady

Kod 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>

Kod CSS 

body {
  cursor: url('../try/demo_source/finger.png'), auto;
}

Kod JavaScript 

angular.module('ionicApp', ['ionic']);

jonów nieskończone przewijanie

Gdy użytkownik dotrze w pobliże stopce lub stopce, Komenda ionInfiniteScroll pozwala wywołać funkcję.

Gdy użytkownik przewija odległość poza dno treści, będzie to powodować określenie na nieskończony.

zwyczaj 

<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();
  });
}

Gdy nie ma więcej danych jest załadowany, można użyć prostego sposobu, aby zapobiec nieskończoną zwój, który jest kątowa w ng-IF polecenia: 

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

API

nieruchomość typ detal
na nieskończone 表达式

Podczas przewijania w części końcowej zdarzenia wyzwalającego.

dystans
(Opcjonalnie)
字符串

Przewijanie od dołu do uruchomienia on-nieskończony dystans wyrażeń. Domyślnie: 1%.

ikona
(Opcjonalnie)
字符串

Ikona jest wyświetlana podczas ładowania. Domyślnie: 'ion ładowania-d'.

$ IonicScrollDelegate

Autoryzacja kontrolować widok przewijania (tworzone przez jonowej zawartości jonów i instrukcji przewijania).

Metoda bezpośrednia jest wyzwalany usługę $ ionicScrollDelegate kontrolować wszystkich widoku przewijania. Kontroluj konkretny widok przewijania z metod $ getByHandle.

zwyczaj 

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>

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

sposób 

resize()

Powiedz widok przewijania, aby przeliczyć jego wielkości kontenera. 

scrollTop([shouldAnimate])
parametry typ detal
shouldAnimate
(Opcjonalnie)
布尔值

Czy zastosować animację przewijania. 

scrollBottom([shouldAnimate])
parametry typ detal
shouldAnimate
(Opcjonalnie)
布尔值

Czy zastosować animację przewijania.