跳到主要内容
版本：v8

可排序项目容器组件

重排序组（reorder group）是一个容器，用于包含使用 reorder 组件的项目。当用户拖拽一个项目并放置时，会触发 ionReorderEnd 事件。应当为此事件实现一个处理函数，并调用其中的 complete 方法。

ionReorderEnd 事件的 detail 属性包含了所有与重排序操作相关的信息，包括 from 和 to 索引。在重排序的上下文中，一个项目从 from 索引移动到 to 索引。关于重排序组的使用示例，请参阅 reorder 文档。

接口​

ReorderMoveEventDetail​

interface ReorderMoveEventDetail {
  from: number;
  to: number;
}

ReorderEndEventDetail​

interface ReorderEndEventDetail {
  from: number;
  to: number;
  complete: (data?: boolean | any[]) => any;
}

ReorderMoveCustomEvent​

虽然不是必须的，但可以使用此接口替代 CustomEvent 接口，以便在使用此组件触发的 Ionic 事件时获得更强的类型支持。

interface ReorderMoveCustomEvent extends CustomEvent {
  detail: ReorderMoveEventDetail;
  target: HTMLIonReorderGroupElement;
}

ReorderEndCustomEvent​

虽然不是必须的，但可以使用此接口替代 CustomEvent 接口，以便在使用此组件触发的 Ionic 事件时获得更强的类型支持。

interface ReorderEndCustomEvent extends CustomEvent {
  detail: ReorderEndEventDetail;
  target: HTMLIonReorderGroupElement;
}

ItemReorderEventDetail (已弃用)​

已弃用 — 请改用 ionReorderEnd 事件和 ReorderEndEventDetail。

interface ItemReorderEventDetail {
  from: number;
  to: number;
  complete: (data?: boolean | any[]) => any;
}

ItemReorderCustomEvent (已弃用)​

已弃用 — 请改用 ionReorderEnd 事件和 ReorderEndCustomEvent。

interface ItemReorderCustomEvent extends CustomEvent {
  detail: ItemReorderEventDetail;
  target: HTMLIonReorderGroupElement;
}

属性​

disabled​

DescriptionIf true, the reorder will be hidden.
Attributedisabled
Typeboolean
Defaulttrue

事件​

NameDescriptionBubbles
ionItemReorder (deprecated)Event that needs to be listened to in order to complete the reorder action.

Deprecated — Use ionReorderEnd instead. If you are accessing event.detail.from or event.detail.to and relying on them being different you should now add checks as they are always emitted in ionReorderEnd, even when they are the same.		true
ionReorderEndEvent that is emitted when the reorder gesture ends. The from and to properties are always available, regardless of if the reorder gesture moved the item. If the item did not change from its start position, the from and to properties will be the same. Once the event has been emitted, the complete() method then needs to be called in order to finalize the reorder action.true
ionReorderMoveEvent that is emitted as the reorder gesture moves.true
ionReorderStartEvent that is emitted when the reorder gesture starts.true

方法​

complete​

DescriptionCompletes the reorder operation. Must be called by the ionReorderEnd event.

If a list of items is passed, the list will be reordered and returned in the proper order.

If no parameters are passed or if true is passed in, the reorder will complete and the item will remain in the position it was dragged to. If false is passed, the reorder will complete and the item will bounce back to its original position.
Signaturecomplete(listOrReorder?: boolean ｜ any[]) => Promise<any>
ParameterslistOrReorder: A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS 自定义属性​

No CSS custom properties available for this component.

插槽​

No slots available for this component.

Contents

编辑此页