Ionic-js-list

Ionic-Javascriptリスト

前の章ですでにIonic CSSリスト要素について説明しました。 この章では、JavaScriptリストを示します。 それらにより、スワイプ、ドラッグ、*削除*などのいくつかの新機能を使用できます。

リストを使用する

リストおよびアイテムの表示に使用されるディレクティブは、以下に示すように ion-list および ion-item です。

<ion-list>
   <ion-item>
      Item 1
   </ion-item>

   <ion-item>
      Item 2
   </ion-item>

   <ion-item>
      Item 3
   </ion-item>
</ion-list>

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

イオンリスト

削除ボタン

このボタンは、 ion-delete-button ディレクティブを使用して追加できます。 任意のアイコンクラスを使用できます。 ユーザーが誤ってボタンをタップして削除プロセスをトリガーする可能性があるため、削除ボタンを常に表示する必要はないため、 show-delete 属性を ion-list に追加し、 ng-modelに接続できます。 。

次の例では、 ion-toggle をモデルとして使用します。 トグルが削除されると、リスト項目にボタンが表示されます。

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>

   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

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

イオンリスト削除ボタン

並べ替えボタン

並べ替えボタンのIonicディレクティブは ion-reorder-button です。 作成した要素には on-reorder 属性があり、ユーザーがこの要素をドラッグするたびにコントローラーから関数をトリガーします。

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon"
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
   </ion-item>
</ion-list>

$scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) {
   $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

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

Ionic List Reorder 1

右側のアイコンをクリックすると、要素をドラッグしてリスト内の他の場所に移動できます。

Ionic List Reorder 2

オプションボタン

オプションボタンは、 ion-option-button ディレクティブを使用して作成されます。 これらのボタンは、リストアイテムを左にスワイプしたときに表示され、アイテム要素を右にスワイプすることで再び非表示にできます。

次の例では、2つのボタンが非表示になっていることがわかります。

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

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

非表示のイオンリストオプション

item要素を左にスワイプすると、テキストが左に移動し、右側にボタンが表示されます。

Ionic List Option Visible

その他の機能

*collection-repeat* 関数は、* AngularJS ng-repeatディレクティブ*の更新バージョンです。 画面上に表示されている要素のみをレンダリングし、スクロールすると残りが更新されます。 これは、大きなリストを操作しているときの重要なパフォーマンスの向上です。 このディレクティブは、リスト項目をさらに最適化するために *item-width* および *item-height* 属性と組み合わせることができます。

リスト内の画像を操作するための他の便利な属性がいくつかあります。 item-render-buffer 関数は、表示されるアイテムの後にロードされるアイテムの数を表します。 この値が高いほど、より多くのアイテムがプリロードされます。 force-refresh-images 関数は、スクロール中の画像のソースに関する問題を修正します。 これらのクラスは両方とも、パフォーマンスに悪影響を及ぼします。