ionic スクロールバー

ion-scroll

ion-scroll はスクロール可能なコンテナを作成するために使用されます。

用法

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

API

属性	型	詳細
delegate-handle (任意)	`文字列`	このハンドルを使用して`$ionicScrollDelegate`スクロールビューを指定します。
direction (任意)	`文字列`	スクロールの方向。 'x' または 'y'。デフォルトは 'y'。
paging (任意)	`ブール値`	ページングでスクロールするかどうか。
on-refresh (任意)	`式`	プルダウンリフレッシュの呼び出しは、`ionRefresher`トリガーされます。
on-scroll (任意)	`式`	ユーザーがスクロールしたときにトリガーされます。
scrollbar-x (任意)	`ブール値`	水平スクロールバーを表示するかどうか。デフォルトはfalseです。
scrollbar-y (任意)	`ブール値`	垂直スクロールバーを表示するかどうか。デフォルトはtrueです。
zooming (任意)	`ブール値`	2本指でのズームをサポートするかどうか。
min-zoom (任意)	`整数`	許可される最小ズーム量（デフォルトは0.5）
max-zoom (任意)	`整数`	許可される最大ズーム量（デフォルトは3）

例

HTML コード

<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 コード

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

JavaScript コード

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

ion-infinite-scroll

ユーザーがフッターまたはその近くに到達すると、ionInfiniteScrollディレクティブを使用して関数を呼び出すことができます。

ユーザーが下部のコンテンツを超えてスクロールすると、指定したon-infiniteがトリガーされます。

用法

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

これ以上読み込むデータがない場合は、簡単な方法として、angularのng-if ディレクティブを使用して無限スクロールを阻止できます:

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

API

属性	型	詳細
on-infinite	`式`	スクロールが一番下まで到達したときにトリガーされるイベント。
distance (任意)	`文字列`	on-infinite式をトリガーするために底部からスクロールする距離。デフォルト: 1%。
icon (任意)	`文字列`	読み込み中に表示されるアイコン。デフォルト: 'ion-loading-d'。

$ionicScrollDelegate

スクロールビューの制御を許可します（ion-content および ion-scroll ディレクティブで作成されます）。

このメソッドは$ionicScrollDelegateサービスによって直接呼び出され、すべてのスクロールビューを制御します。$getByHandleメソッドを使用して特定のスクロールビューを制御します。

用法

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

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

メソッド

resize()

スクロールビューにコンテナサイズの再計算を指示します。

scrollTop([shouldAnimate])

パラメータ	型	詳細
shouldAnimate (任意)	`ブール値`	スクロールアニメーションを適用するかどうか。

scrollBottom([shouldAnimate])

パラメータ	型	詳細
shouldAnimate (任意)	`ブール値`	スクロールアニメーションを適用するかどうか。

その他の拡張

ionic CSS

ionic JavaScript