Ionic-js-scroll

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>

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

CSSコード

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

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

Ionic Javascript Scroll Start

このマップを必要な部分にスクロールできます。 スクロールして、アジアを示しましょう。

Ionic Javascript Scroll End

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

スクロール属性

Attribute	Type	Details
direction	string	Possible directions of the scroll. Default value is *y *
delegate-handle	string	Used for scroll identification with* $ionicScrollDelegate*.
locking	boolean	Used to lock scrolling in one direction at a time. Default value is true.
paging	boolean	Used to determine if the paging will be used with scroll.
on-refresh	expression	Called on pull-to-refresh.
on-scroll	expression	Called when scrolling.
scrollbar-x	boolean	Should horizontal scroll bar be shown. Default value is true.
scrollbar-y	string	Should vertical scroll bar be shown. Default value is true.
zooming	boolean	Used to apply pinch-to-zoom.
min-zoom	integer	Minimal zoom value.
max-zoom	integer	Maximal zoom value.
scrollbar-x	boolean	Used to enable bouncing. Default value on IOS is true, on 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* では他の属性も使用できます。 それらのいくつかは、以下の表にリストされています。

スクロール属性

Attribute	Type	Details
on-infinite	expression	What should be called when scrolled to the bottom.
distance	string	The distance from the bottom needed to trigger on-infinite expression.
spinner	string	What spinner should be shown while loading
immediate-check	Boolean	Should ‘on-infinite’ be called when screen is loaded

スクロールデリゲート

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

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

Ionic Javascript Scroll Bottom

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

Ionic Javascript Scroll Top

ここで、すべての $ ionicScrollDelegate メソッドを調べます。

デリゲートメソッド

Method	Parameters	Type	Details
scrollTop(parameter)	shouldAnimate	boolean	Should scroll be animated.
scrollBottom(parameter)	shouldAnimate	boolean	Should scroll be animated.
scrollTo(parameter1, parameter2, parameter3)	left, top, shouldAnimate	number, number, integer	First two parameters determine value of the x, and y-axis offset.
scrollBy(parameter1, parameter2, parameter3)	left, top, shouldAnimate	number, number, integer	First two parameters determine value of the x, and y-axis offset.
zoomTo(parameter1, parameter2, parameter3, parameter4)	level, animate, originLeft, originTop	number, boolean, number, number	level *is used to determine level to zoom to. originLeft and originRight* coordinates where the zooming should happen.
zoomBy(parameter1, parameter2, parameter3, parameter4)	factor, animate, originLeft, originTop	number, boolean, number, number	factor *is used to determine factor to zoom by. originLeft and originRight *coordinates where the zooming should happen.
getScrollPosition()	/	/	Returns object with two number as properties:* left and right*. These numbers represent the distance the user has scrolled from the left and from the top respectively.
anchorScroll(parameter1)	shouldAnimate	boolean	It will scroll to the element with the same id as the window.loaction.hash. If this element does not exist, it will scroll to the top.
freezeScroll(parameter1)	shouldFreeze	boolean	Used to disable scrolling for particular scroll.
freezeAllScrolls(parameter1)	shouldFreeze	boolean	Used to disable scrolling for all the scrolls in the app.
getScrollViews()	/	object	Returns the scrollView object.
$getByHandle(parameter1)	handle	string	Used to connect methods to the particular scroll view with the same handle. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();