Ionic Scroll

ion-scroll

ion-scroll wird verwendet, um einen scrollbaren Container zu erstellen.

Nutzung

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

API

Attribute Type Details
delegate-handle
(Optional)
 string

Der Handle wird verwendet, um$ionicScrollDelegatedie Scroll-Ansicht anzugeben.
direction
(Optional)
 string

Die Richtung des Scrollens. 'x' oder 'y'. Standard ist 'y'.
paging
(Optional)
 boolean

Gibt an, ob mit Paging gescrollt werden soll.
on-refresh
(Optional)
 expression

Wird aufgerufen, wenn ein Pull-to-RefreshionRefresherausgelöst wird.
on-scroll
(Optional)
 expression

Wird ausgelöst, wenn der Benutzer scrollt.
scrollbar-x
(Optional)
 boolean

Ob die horizontale Bildlaufleiste angezeigt werden soll. Standardwert ist false.
scrollbar-y
(Optional)
 boolean

Ob die vertikale Bildlaufleiste angezeigt werden soll. Standardwert ist true.
zooming
(Optional)
 boolean

Ob Pinch-Zoom (Zwei-Finger-Zoom) unterstützt werden soll.
min-zoom
(Optional)
 integer

Der minimal zulässige Maßstab (Standardwert ist 0.5)
max-zoom
(Optional)
 integer

Der maximal zulässige Maßstab (Standardwert ist 3)

Beispiel

HTML-Code

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; background: url('http://www.example.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS-Code

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

JavaScript-Code

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

ion-infinite-scroll

Die ionInfiniteScroll-Direktive ermöglicht es Ihnen, eine Funktion aufzurufen, wenn der Benutzer den Footer erreicht oder sich in dessen Nähe befindet.

Wenn der Benutzer über den unteren Rand des Inhalts hinaus scrollt, wird das von Ihnen angegebene on-infinite ausgelöst.

Nutzung

<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 zum Laden vorhanden sind, können Sie mit einer einfachen Methode das Infinite Scroll stoppen: die Angular-Direktive ng-if:

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

API

Attribute Type Details
on-infinite expression

Das Ereignis, das ausgelöst wird, wenn bis zum unteren Rand gescrollt wird.
distance
(Optional)
 string

Der Abstand vom unteren Rand, um den on-infinite-Ausdruck auszulösen. Standard: 1%.
icon
(Optional)
 string

Das Symbol, das während des Ladens angezeigt wird. Standard: 'ion-loading-d'.

$ionicScrollDelegate

Delegieren Sie die Steuerung von Scroll-Ansichten (erstellt über die Direktiven ion-content und ion-scroll).

Diese Methode wird direkt vom Dienst $ionicScrollDelegate aufgerufen, um alle Scroll-Ansichten zu steuern. Verwenden Sie die Methode $getByHandle, um eine bestimmte Scroll-Ansicht zu steuern.

Nutzung

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

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

Methoden

resize()

Weisen Sie die Scroll-Ansicht an, ihre Containergröße neu zu berechnen.

scrollTop([shouldAnimate])
Parameters Type Details
shouldAnimate
(Optional)
 boolean

Ob Scroll-Animation angewendet werden soll.

 
scrollBottom([shouldAnimate])
Parameters Type Details
shouldAnimate
(Optional)
 boolean

Ob Scroll-Animation angewendet werden soll.
Andere Erweiterungen