Latest web development tutorials

ionische Scrollbar

Ion-Scroll

Ion-Scroll wird verwendet, um einen rollbaren Behälter zu schaffen.

Verwendung 

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

API

Immobilien Typ Detail
Delegat-Griff
(Optional)
字符串

Der Griff Gebrauch $ionicScrollDelegate Ansicht blättern bezeichnet.

Richtung
(Optional)
字符串

Die Richtung des Scrollens. 'X' oder 'y'. Default 'y'.

Paging
(Optional)
布尔值

Paging, ob Scrollen.

on-Refresh
(Optional)
表达式

Rufen Sie den Drop-down - Refresh von ionRefresher Trigger.

on-Scroll
(Optional)
表达式

Wird ausgelöst, wenn der Nutzer scrollt.

Scrollbar-x
(Optional)
布尔值

Ob horizontale Bildlaufleiste angezeigt werden soll. Der Standardwert ist false.

Scrollbar-y
(Optional)
布尔值

Ob die vertikale Bildlaufleiste angezeigt werden soll. Der Standardwert ist true.

Zoomen
(Optional)
布尔值

Es unterstützt die Zwei-Finger-Zoom.

min-Zoom
(Optional)
整数

Die minimal zulässige Menge der Skalierung (Standard 0.5)

max-Zoom
(Optional)
整数

Die maximal zulässige Höhe der Skalierung (Standardeinstellung ist 3)

Beispiele

HTML-Code 

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

CSS-Code 

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

JavaScript-Code 

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

Ion-unendlich-Scroll

Wenn der Benutzer die Nähe der Fußzeile oder Fußzeile erreicht, ermöglicht ionInfiniteScroll Befehl Sie eine Funktion aufzurufen.

Wenn der Benutzer den Abstand über den Boden des Inhalts scrollt, wird es Ihnen auslösen die auf unendliche angeben.

Verwendung 

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

Wenn keine Daten mehr geladen wird, können Sie eine einfache Methode verwenden unendlich Blättern zu verhindern, ist, dass Winkel im ng-if-Befehl: 

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

API

Immobilien Typ Detail
on-unendlich 表达式

Wenn in dem Endabschnitt des Triggerereignisses zu scrollen.

Entfernung
(Optional)
字符串

Blättern Sie vom Boden auf unendliche Ausdrücke Distanz auszulösen. Default: 1%.

Symbol
(Optional)
字符串

Symbol wird angezeigt, wenn das Laden. Vorgabe: "Ionen Laden-d '.

$ IonicScrollDelegate

Autorisierung steuern die Scroll-Ansicht (erstellt durch Ionengehalt und Ionen Scroll-Befehl).

Die direkte Methode ist $ ionicScrollDelegate Dienst ausgelöst alle Bildlaufansicht zu steuern. Steuern Sie bestimmte Scroll-Ansicht mit $ getByHandle Methoden.

Verwendung 

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

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

Weg 

resize()

Sagen Sie Scroll-Ansicht seine Behältergröße neu zu berechnen. 

scrollTop([shouldAnimate])
Parameter Typ Detail
shouldAnimate
(Optional)
布尔值

Ob Scroll-Animation anzuwenden. 

scrollBottom([shouldAnimate])
Parameter Typ Detail
shouldAnimate
(Optional)
布尔值

Ob Scroll-Animation anzuwenden.