itemSilding

一、

一个可以滑动的item是可以包含几个按钮，这要求item作为一个子控件并以List为父控件，所有的按钮可以被放在ion-itemoptions中

二、使用

<ion-list>
  <ion-item-sliding #item>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button (click)="unread(item)">Unread</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

三、滑动的方向

默认情况下，是从右向左划的，所以按钮会被放在右边，但是也可以设置成相反的情况。

<ion-item-options side="right">
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

<ion-item-options side="left">
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

四、监听事件(ionDrag)和(ionSwipe)

可以知道当前的相对位置通过ionDrag事件

<ion-item-sliding (ionDrag)="logDrag($event)">
  <ion-item>Item</ion-item>
  <ion-item-options>
    <button ion-button>Favorite</button>
  </ion-item-options>
</ion-item-sliding>

五、按钮位置

如果该按钮中有图片和文字的话，那么默认情况下会把图片显示在文本上面，这可以通过设置icon-left来调整

<ion-item-options icon-left>
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

六、

1、close

关闭这个滑动item

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

2、ionDrag

表现出其位置的变化。