跳到主要内容
版本:v8

ion-reorder-group

重新排序组是使用 reorder 组件的项目的容器。当用户拖拽一个项目并放下时,会触发 ionReorderEnd 事件。应实现该事件的处理函数来调用 complete 方法。

ionReorderEnd 事件的 detail 属性包含了重新排序操作的所有相关信息,包括 fromto 索引。在重新排序的上下文中,一个项目会从某个索引 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(已废弃)

已废弃 — 请改用带有 ReorderEndEventDetailionReorderEnd 事件。

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

ItemReorderCustomEvent(已废弃)

已废弃 — 请改用带有 ReorderEndCustomEventionReorderEnd 事件。

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

属性

disabled

说明If true, the reorder will be hidden.
属性disabled
类型boolean
默认值true

事件

Name说明冒泡
ionItemReorder (已弃用)Event that needs to be listened to in order to complete the reorder action.

已弃用 — 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

说明Completes 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.
签名complete(listOrReorder?: boolean | any[]) => Promise<any>
参数listOrReorder: 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

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。