中安拓也のブログ

プログラミングについて書くブログ

【JavaScript】Ionicで架空のECアプリを作成する #9 - スワイプするとボタンが表示されるリスト

前回の記事はこちら

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。

第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変更します。

  • デモ

こちらのURLで、完成版のアプリを実際に操作することができます

https://l08084.github.io/ionic-sample-shopping-app/www

  • GitHubリポジトリ

github.com

バージョン情報

Angular(JavaScriptのWebフレームワーク)ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています

  • ionic-angular@3.9.2
  • Angular@5.2.10
  • Google Chrome バージョン: 60.0.3112.113

今回やること

f:id:l08084:20180510231720p:plain
今回やることのイメージ

前回は、ショッピングカートに入れた全ての商品を削除する「空にする」ボタンを実装しました。今回は、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>

以上


次回の記事