Delete Swipe gestures in ionic 3

问题

I want to create an ionic delete swipe gesture but it doesn't seem to work.

**This is my home page ( i called it myPage.html)**
    <ion-header>
      <ion-navbar color="secondary">
        <ion-title align="center">
          My Tasks
        </ion-title>
        <ion-buttons end>
          <button ion-button icon-only (click)="addItem()"><ion-icon name="add-circle"></ion-icon></button>
        </ion-buttons>
      </ion-navbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}</ion-item>
      </ion-list>
    </ion-content>

    <ion-item-sliding (ionSwipe)="delete(item)">
      <ion-item>Item</ion-item>
      <ion-item-options>
        <button ion-button expandable (click)="delete(item)">Delete</button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-footer>
      <ion-toolbar >
        <ion-title>@2018, MyBlog | by SRM </ion-title>
      </ion-toolbar>
    </ion-footer>

I did follow the documentation: https://ionicframework.com/docs/api/components/item/ItemSliding/ but I think I'm missing something and I'm still new to this. Can anyone please help me? :(

回答1:

As per the docs, you need to put the ion-item inside ion-item-sliding component.

Thus, the structure of your markup should be:

<ion-list>
    <ion-item-sliding *ngFor="let item of items">
        <ion-item>
            {{item.title}}
        </ion-item>
        <ion-item-options side="right">
            <button ion-button (click)="delete(item)">
                <ion-icon name="trash"></ion-icon>Delete
            </button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>

Refer here for the sample: https://stackblitz.com/edit/ionic-eofb82

来源：https://stackoverflow.com/questions/49037457/delete-swipe-gestures-in-ionic-3

标签

angular

ionic-framework