イオンスクロールバー

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

プロパティ	タイプ	詳細
デリゲートハンドル (オプション)	`string` `字符串`	该句柄利用`$ionicScrollDelegate`指定滚动视图。
direction (可选)	`字符串`	滚动的方向。 'x' 或 'y'。默认 'y'。
paging (可选)	`布尔值`	分页是否滚动。
on-refresh (可选)	`表达式`	调用下拉刷新，由`ionRefresher`触发。
on-scroll (可选)	`表达式`	当用户滚动时触发。
scrollbar-x (可选)	`布尔值`	是否显示水平滚动条。默认为false。
scrollbar-y (可选)	`布尔值`	是否显示垂直滚动条。默认为true。
zooming (可选)	`布尔值`	是否支持双指缩放。
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('../style/images/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 代码

body {
  cursor: url('../style/images/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

direction

属性	类型	详情
on-infinite	`表达式`	当滚动到底部时触发的事件。
distance (可选)	`字符串`	从底部滚动到触发on-infinite表达式的距离。默认: 1%。
icon (可选)	`字符串`	このハンドル`$ionicScrollDelegate` を使用してスクロールビューを指定します。

🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜 スクロールの方向。「x」または「y」。デフォルトは「y」です。 🎜🎜🎜🎜🎜ページング🎜🎜(オプション)🎜🎜🎜🎜ブール値🎜🎜🎜 ページングがスクロールであるかどうか。 🎜🎜🎜🎜🎜on-refresh🎜🎜(オプション)🎜🎜🎜🎜expression🎜🎜🎜 ionRefresher によってトリガーされるプルダウンリフレッシュを呼び出します。 🎜🎜🎜🎜🎜オンスクロール🎜🎜(オプション)🎜🎜🎜🎜expression🎜🎜🎜ユーザーがスクロールすると発生します。 🎜🎜🎜🎜🎜scrollbar-x🎜🎜(オプション)🎜🎜🎜🎜ブール値🎜🎜🎜水平スクロールバーを表示するかどうか。デフォルトは false です。 🎜🎜🎜🎜🎜scrollbar-y🎜🎜(オプション)🎜🎜🎜🎜ブール値🎜🎜🎜垂直スクロールバーを表示するかどうか。デフォルトは true です。 🎜🎜🎜🎜🎜zooming🎜🎜(オプション)🎜🎜🎜🎜ブール値🎜🎜🎜 2本指でのズームをサポートするかどうか。 min-zoom🎜🎜（オプション）🎜🎜🎜🎜 integer オプション) 🎜🎜🎜🎜整数🎜🎜🎜許容最大スケーリング(デフォルトは3)🎜🎜🎜🎜🎜🎜インスタンス🎜🎜HTMLコード🎜

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

🎜CSSコード🎜

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

🎜JavaScriptコード🎜 rrリー🎜< br/>🎜🎜🎜ion-infinite-scroll🎜🎜 ionInfiniteScroll ディレクティブを使用すると、ユーザーがフッターに到達したとき、またはフッター付近に到達したときに関数を呼び出すことができます。 🎜🎜ユーザーが下部のコンテンツを超えてスクロールすると、指定したオン無限がトリガーされます。 🎜🎜使用法🎜

resize()

scrollTop([shouldAnimate])

🎜データがロードされていないときに無限スクロールを防ぐ簡単な方法は、Angular の ng-if ディレクティブです:🎜

scrollBottom([shouldAnimate])

🎜API🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Details 🎜🎜🎜🎜 🎜🎜に-無限🎜🎜expression🎜🎜🎜一番下までスクロールするとトリガーされるイベント。 🎜🎜🎜🎜🎜 distance🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜on-infinite 式をトリガーする下からの距離。デフォルト: 1%。 🎜🎜🎜🎜🎜icon🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜 ロード時に表示されるアイコン。デフォルト: 'ion-loading-d'。 🎜🎜🎜🎜🎜

$ionicScrollDelegate

スクロールビューの制御を委任します (ion-content および ion-scroll ディレクティブによって作成されます)。

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

Usage

rrreeerrreee

Method

rrreee

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