Ionic-js-scroll
Ionic-JavaScriptスクロール
イオンアプリでのスクロール操作に使用される要素は、 ion-scroll と呼ばれます。
スクロールを使用する
次のコードスニペットは、スクロール可能なコンテナを作成し、スクロールパターンを調整します。 最初に、HTML要素を作成し、プロパティを追加します。 → direction = "xy" を追加して、すべての側にスクロールできるようにします。 スクロール要素の幅と高さも設定します。
HTMLコード
次に、 ion-scroll 内で作成した div 要素に世界地図の画像を追加し、幅と高さを設定します。
CSSコード
アプリを実行すると、地図をあらゆる方向にスクロールできます。 次の例は、マップの北米部分を示しています。
このマップを必要な部分にスクロールできます。 スクロールして、アジアを示しましょう。
スクロール属性
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コード
コントローラコード
スクロール属性
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コード
コントローラコード
上記のコードは、次の画面を生成します-
Ionic Javascript Scroll Bottom
ボタンをタップすると、スクロールが上部に移動します。
ここで、すべての $ 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(); |