ion-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(已废弃)
已废弃 — 请改用带有 ReorderEndEventDetail 的 ionReorderEnd 事件。
interface ItemReorderEventDetail {
from: number;
to: number;
complete: (data?: boolean | any[]) => any;
}
ItemReorderCustomEvent(已废弃)
已废弃 — 请改用带有 ReorderEndCustomEvent 的 ionReorderEnd 事件。
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 |
ionReorderEnd | Event 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 |
ionReorderMove | Event that is emitted as the reorder gesture moves. | true |
ionReorderStart | Event 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> |