删除 ionic 3 中的滑动手势

2024-04-14

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

**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/ https://ionicframework.com/docs/api/components/item/ItemSliding/但我认为我错过了一些东西,而且我对此仍然很陌生。谁能帮帮我吗? :(


根据文档,您需要将ion-item inside 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 https://stackblitz.com/edit/ionic-eofb82

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

删除 ionic 3 中的滑动手势 的相关文章

随机推荐