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

表现出其位置的变化。