Question

我想创建一个离子删除滑动手势，但它似乎不起作用。

**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>

我确实遵循了文档：https://ionicframework.com/docs/api/components/item/ItemSliding/但我觉得我错过了一些东西而且我还是新手。谁能帮帮我吗？：（

Answer 1

根据文档，您需要将ion-item放在ion-item-sliding组件中。

因此，标记的结构应为：

<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>

请参阅此处的示例：https://stackblitz.com/edit/ionic-eofb82

删除离子3中的滑动手势

1 个答案: