左右滑动弹出按钮，类似于QQ中，左右滑动消息框会弹出删除等按钮

 ItemSliding

ion-item-sliding

改进此文档

滑动项是可以滑动以显示按钮的列表项。它需要一个Item组件作为一个孩子，一个List组件作为父项。所有显示的按钮都可以放在<ion-item-options>元素中。

用法

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

滑动方向

默认情况下，当滑动项目从右向左滑动时，按钮被显示，因此按钮位于右侧。但是也可以通过设置元素side上的属性来显示它们在右侧（从左到右滑动）ion-item-options。最多ion-item-options可以同时使用2个，以便根据切换方向显示两组不同的按钮。

<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-start的属性 来更改文本左侧的图标<ion-item-options>。

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

可扩展选项

如果您滑过某一点，则可以扩展选项以占用该项目的全部宽度。这可以与ionSwipe在类上调用方法的事件相结合。

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

我们可以delete通过点击按钮或通过对项目进行全面刷卡来打电话。

实例成员

 close()

关闭滑动项目。项目也可以从列表关闭。

可以通过抓取参考来关闭滑动项目ItemSliding。在下面的示例中，模板引用变量slidingItem放在元素上并传递给该share方法。

<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();
  }
}

输出事件

ATTR	细节
ionDrag	当滑动位置发生变化时发出。它报告相对位置。 ondrag(item) { let percent = item.getSlidingPercent(); if (percent > 0) { // positive console.log('right side'); } else { // negative console.log('left side'); } if (Math.abs(percent) > 1) { console.log('overscroll'); } }

Sass变量

iOS  材质设计  Windows平台

属性	默认	描述
$item-ios-body-text-font-size	1.7rem	项目文本的字体大小
$item-ios-paragraph-margin-top	0	物品段落的保证金顶部
$item-ios-paragraph-margin-end	0	项目段落的保证金结束
$item-ios-paragraph-margin-bottom	2px	物品段落的边缘底部
$item-ios-paragraph-margin-start	$item-ios-paragraph-margin-end	项目段落的保证金开始
$item-ios-paragraph-font-size	1.4rem	项目段落的字体大小
$item-ios-paragraph-text-color	#8e9093	项目段落的颜色
$item-ios-avatar-size	36px	物品中头像的大小
$item-ios-avatar-border-radius	50%	物品中头像的边框半径
$item-ios-thumbnail-size	56px	项目中缩略图的大小
$item-ios-detail-push-show	true	显示项目上的详细箭头图标
$item-ios-detail-push-color	$list-ios-border-color	详细箭头图标的颜色
$item-ios-detail-push-svg	"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>"	详细箭头图标
$item-ios-divider-background	#f7f7f7	分隔线的背景
$item-ios-divider-color	#222	分色器的颜色
$item-ios-sliding-content-background	$list-ios-background-color	滑动内容的背景

效果图