前回の記事はこちら
ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。
第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変更します。
- デモ
こちらのURLで、完成版のアプリを実際に操作することができます
https://l08084.github.io/ionic-sample-shopping-app/www
- GitHubリポジトリ
バージョン情報
Angular(JavaScriptのWebフレームワーク)ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています
- ionic-angular@3.9.2
- Angular@5.2.10
- Google Chrome バージョン: 60.0.3112.113
今回やること
前回は、ショッピングカートに入れた全ての商品を削除する「空にする」ボタンを実装しました。今回は、IonicのItemSlidingを使って、カートに入れた商品を一列ずつ削除するボタンを実装していきます。
スライドするとボタンが表示されるようにする
リストを、スライドするとボタンが表示されるItemSliding
に変えます。
- ポイント
ItemSliding
にしたい部分を<ion-item-sliding>
で囲む- 削除ボタンを
<ion-item-options>
で囲む - 削除ボタンをクリックすると、
remove()
メソッドがコールされる
カート画面のテンプレート(src/pages/cart/cart.html
):
<ion-list> <!-- ItemSlidingにしたいリストの部分を'ion-item-sliding'で囲む --> <ion-item-sliding *ngFor="let product of productList; let i = index"> <ion-item> <div class="quantity">{{product.quantity}}</div> <div class="product">{{product.name}}</div> <div class="price">¥{{product.price * product.quantity}}</div> </ion-item> <!-- スライドした時に表示したいアイテムはここに書く --> <ion-item-options> <button ion-button (click)="remove(i)" color="danger">アイテムを削除する</button> </ion-item-options> </ion-item-sliding>
以上