Ionic-JavaScriptスクロール

イオンアプリのスクロール操作に使用される要素は、 ion-scroll

スクロールの使用

次のコードスニペットは、スクロール可能なコンテナを作成し、スクロールパターンを調整します。まず、HTML要素を作成し、それにプロパティを追加します。追加します→direction = "xy"あらゆる方向にスクロールできるようにします。また、スクロール要素の幅と高さも設定します。

HTMLコード

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

次に、世界地図の画像をに追加します div 内部で作成した要素 ion-scroll 幅と高さを設定します。

CSSコード

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

アプリを実行すると、地図をあらゆる方向にスクロールできます。次の例は、マップの北米部分を示しています。

この地図を好きな場所にスクロールできます。スクロールしてアジアを表示しましょう。

に適用できる他の属性があります ion-scroll。次の表で確認できます。

スクロール属性

属性 タイプ 詳細
方向 ストリング スクロールの可能な方向。デフォルト値はy
デリゲートハンドル ストリング スクロールの識別に使用されます $ionicScrollDelegate
ロック ブール値 一度に一方向のスクロールをロックするために使用されます。デフォルト値はtrueです。
ページング ブール値 ページングをスクロールで使用するかどうかを決定するために使用されます。
オンリフレッシュ プルトゥリフレッシュで呼び出されます。
オンスクロール スクロール時に呼び出されます。
スクロールバー-x ブール値 水平スクロールバーを表示する必要があります。デフォルト値はtrueです。
スクロールバー-y ストリング 垂直スクロールバーを表示する必要があります。デフォルト値はtrueです。
ズーミング ブール値 ピンチツーズームを適用するために使用されます。
最小ズーム 整数 最小ズーム値。
最大ズーム 整数 最大ズーム値。
スクロールバー-x ブール値 バウンスを有効にするために使用されます。IOSのデフォルト値はtrue、Androidのデフォルト値はfalseです。

無限スクロール

無限スクロールは、スクロールがページの下部を通過するときに何らかの動作をトリガーするために使用されます。次の例は、これがどのように機能するかを示しています。コントローラでは、リストにアイテムを追加するための関数を作成しました。これらのアイテムは、スクロールが最後にロードされた要素の10%を通過したときに追加されます。これは、ロードされた要素が30個になるまで続きます。読み込みが完了するたびに、on-infinite 放送します scroll.infiniteScrollComplete イベント。

HTMLコード

<ion-list>
   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" 
   distance = "10%"></ion-infinite-scroll>

コントローラコード

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;
   
   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length}); 

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;
      }
   
      $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

他の属性も一緒に使用できます ion-infinite-scroll。それらのいくつかを以下の表に示します。

スクロール属性

属性 タイプ 詳細
オン-無限 下にスクロールしたときに何と呼ばれるべきか。
距離 ストリング on-infinite式をトリガーするために必要な底からの距離。
スピナー ストリング ロード中に表示されるスピナー
即時チェック ブール値 画面が読み込まれたときに「on-infinite」を呼び出す必要があります

スクロールデリゲート

Ionicは、スクロール要素を完全に制御するためのデリゲートを提供します。それは注入することによって使用することができます$ionicScrollDelegate コントローラにサービスを提供し、コントローラが提供する方法を使用します。

次の例は、20個のオブジェクトのスクロール可能なリストを示しています。

HTMLコード

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

コントローラコード

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

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

上記のコードは次の画面を生成します-

ボタンをタップすると、スクロールが一番上に移動します。

今、私たちはすべてを通過します $ionicScrollDelegate メソッド。

デリゲートメソッド

方法 パラメーター タイプ 詳細
scrollTop(パラメータ) shouldAnimate ブール値 スクロールをアニメーション化する必要があります。
scrollBottom(パラメーター) shouldAnimate ブール値 スクロールをアニメーション化する必要があります。
scrollTo(parameter1、parameter2、parameter3) 左、上、shouldAnimate 数、数、整数 最初の2つのパラメーターは、x軸とy軸のオフセットの値を決定します。
scrollBy(parameter1、parameter2、parameter3) 左、上、shouldAnimate 数、数、整数 最初の2つのパラメーターは、x軸とy軸のオフセットの値を決定します。
zoomTo(parameter1、parameter2、parameter3、parameter4) level、animate、originLeft、originTop 数、ブール値、数、数 level ズームするレベルを決定するために使用されます。 originLeft そして originRight ズームが発生する場所の座標。
zoomBy(parameter1、parameter2、parameter3、parameter4) factor、animate、originLeft、originTop 数、ブール値、数、数 factor ズームする係数を決定するために使用されます。 originLeft そして originRight ズームが発生する場所の座標。
getScrollPosition() / / プロパティとして2つの数値を持つオブジェクトを返します。 left そして right。これらの数値は、ユーザーが左からスクロールした距離と上からスクロールした距離をそれぞれ表します。
アンカースクロール(パラメーター1) shouldAnimate ブール値 と同じIDの要素にスクロールします window.loaction.hash。この要素が存在しない場合は、一番上にスクロールします。
FreezeScroll(parameter1) shouldFreeze ブール値 特定のスクロールのスクロールを無効にするために使用されます。
FreezeAllScrolls(parameter1) shouldFreeze ブール値 アプリ内のすべてのスクロールのスクロールを無効にするために使用されます。
getScrollViews() / オブジェクト scrollViewオブジェクトを返します。
$ getByHandle(parameter1) 扱う ストリング 同じハンドルでメソッドを特定のスクロールビューに接続するために使用されます。 $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();