左右滑動彈出按鈕，類似于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 > ) { // positive console.log('right side'); } else { // negative console.log('left side'); } if (Math.abs(percent) > ) { console.log('overscroll'); } }

Sass變量

iOS  材質設計  Windows平台

屬性	預設	描述
$item-ios-body-text-font-size	1.7rem	項目文本的字型大小
$item-ios-paragraph-margin-top		物品段落的保證金頂部
$item-ios-paragraph-margin-end		項目段落的保證金結束
$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	滑動内容的背景

效果圖