Skip to main content

ion-reorder-group

重新排序组是一个用于包含使用 reorder 组件的项目的容器。当用户拖动一个项目并放下时，会触发 ionReorderEnd 事件。应该为此事件实现一个处理程序，该处理程序调用 complete 方法。

🌐 The reorder group is a container for items using the reorder component. When the user drags an item and drops it, the ionReorderEnd event is dispatched. A handler for this event should be implemented that calls the complete method.

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

🌐 The detail property of the ionReorderEnd event includes all of the relevant information about the reorder operation, including the from and to indexes. In the context of reordering, an item moves from an index to an index. For example usage of the reorder group, see the reorder documentation.

接口​

🌐 Interfaces

ReorderMoveEventDetail​

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

ReorderEndEventDetail​

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

ReorderMoveCustomEvent​

虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对从此组件发出的 Ionic 事件进行更强类型的处理。

🌐 While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

ReorderEndCustomEvent​

虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对从此组件发出的 Ionic 事件进行更强类型的处理。

🌐 While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

ItemReorderEventDetail（已弃用）​

🌐 ItemReorderEventDetail (deprecated)

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

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

ItemReorderCustomEvent（已弃用）​

🌐 ItemReorderCustomEvent (deprecated)

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

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

属性​

🌐 Properties

disabled​

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

事件​

🌐 Events

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

方法​

🌐 Methods

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 阴影部分​

🌐 CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性​

🌐 CSS Custom Properties

No CSS custom properties available for this component.

插槽​

🌐 Slots

No slots available for this component.

目录