イオンスクロールバー
イオンスクロール
イオンスクロールは、スクロール可能なコンテナを作成するために使用されます。
使用法
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ... </ion-scroll>
API
| プロパティ | タイプ | 詳細 |
|---|---|---|
| デリゲートハンドル （オプション） | 字符串 | ハンドルの使用 |
| 方向 （オプション） | 字符串 | スクロールの方向。 'X'または 'Y'。 デフォルトは「y」。 |
| ページング （オプション） | 布尔值 | スクロールするかどうかをページング。 |
| 上のリフレッシュ （オプション） | 表达式 | ドロップダウンリフレッシュを呼び出し |
| 上スクロール （オプション） | 表达式 | 火災時にユーザーがスクロールします。 |
| スクロールバー-X （オプション） | 布尔值 | 水平スクロールバーを表示するかどうか。 デフォルトはfalseです。 |
| スクロールバー-Y （オプション） | 布尔值 | 垂直スクロールバーを表示するかどうか。 デフォルトはtrueです。 |
| ズーミング （オプション） | 布尔值 | これは、2本指ズームをサポートしています。 |
| 分ズーム （オプション） | 整数 | スケーリングの最小許容量（デフォルトは0.5です） |
| 最大ズーム （オプション） | 整数 | スケーリングの最大許容量（デフォルトは3です） |
例
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>
CSSコード
body {
cursor: url('../try/demo_source/finger.png'), auto;
}
JavaScriptコード
angular.module('ionicApp', ['ionic']);
イオン無限スクロール
ユーザーはフッターまたはフッターの近傍に到達すると、ionInfiniteScrollコマンドを使用すると、関数を呼び出すことができます。
ユーザがコンテンツの下部を越えて距離をスクロールしたときに、それは上無限指定するようにトリガされます。
使用法
<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();
});
}
それ以上のデータがロードされていない場合、あなたは無限スクロールを防止するために、簡単な方法を使用することができ、それはNG-ifコマンドの角度です。
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
| プロパティ | タイプ | 詳細 |
|---|---|---|
| オン無限 | 表达式 | トリガイベントの端部にスクロールします。 |
| 距離 （オプション） | 字符串 | 上の無限の表現の距離をトリガするために下からスクロールします。 既定値：1％。 |
| アイコン （オプション） | 字符串 | ロード時にアイコンが表示されます。 デフォルト：「イオンローディング-D '。 |
$ IonicScrollDelegate
承認は、（イオン含有量及びイオンスクロール指示によって作成された）スクロールビューを制御します。
直接法は、スクロールビューのすべてを制御するために、$ 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 （オプション） | 布尔值 | スクロールアニメーションを適用するかどうか。 |