跳至主要内容
版本:v8

ion-reorder

阴影

Reorder 是一个组件,允许拖动项目以更改其在项目组中的顺序。 它必须在 reorder group 中使用,以提供可视化的拖放界面。

Reorder 是用于拖放项目的锚点。 重新排序完成后,将从 reorder group 分派 ionItemReorder 事件,并且需要调用 complete 方法。

基本用法

Reorder 最基本的示例是将其放置在项目内部。 默认情况下,reorder group 的 reorder 功能被禁用。 它可以通过将 reorder group 上的 disabled 属性设置为 false 来启用。 然后,可以使用重新排序图标来拖放项目并重新排序它们。

控制台
从上面的示例中记录的控制台消息将显示在此处。

切换重新排序

在某些情况下,可能需要选择切换重新排序功能。 这可以通过根据函数或变量使 disabled 属性具有响应性来完成。

控制台
从上面的示例中记录的控制台消息将显示在此处。

自定义重新排序图标

重新排序组件使用在 iOS 上带三条线,在 Material Design 上带两条线的重新排序图标。 这可以通过在 reorder 内部添加一个 Icon 组件,并使用任何可用的 Ionicons 来自定义。

控制台
从上面的示例中记录的控制台消息将显示在此处。

重新排序包装器

Reorder 也可以用作项目的包装器,使项目本身成为锚点。 点击下面任何项目并将其拖动以重新排序列表。

控制台
从上面的示例中记录的控制台消息将显示在此处。

更新数据

当在 reorder group 上调用 complete 方法而没有参数时,将重新排序 DOM 节点。 如果项目是从需要排序的数据数组中呈现的,这会导致数据和 DOM 不同步。

为了在完成重新排序后对数组进行排序,应将数组作为参数传递给 complete 方法。 complete 方法将对数组进行排序并将其返回,以便可以重新分配。 请注意,传递数组将阻止 Ionic 重新排序 DOM 节点。

在某些情况下,应用程序可能需要自行重新排序数组和 DOM 节点。 如果需要,应将 false 作为参数传递给 complete 方法。 这将阻止 Ionic 重新排序 reorder group 内的任何 DOM 节点。

无论采用哪种方法,如果在循环中提供,都应提供一个稳定的身份来重新排序项目。 这意味着使用 Angular 的 trackBy,以及 React 和 Vue 的 key

控制台
从上面的示例中记录的控制台消息将显示在此处。

与虚拟滚动一起使用

Reorder 需要滚动容器才能正常工作。 当使用虚拟滚动解决方案时,需要提供自定义滚动目标。 内容的滚动需要被禁用,并且 .ion-content-scroll-host 类需要添加到负责滚动的元素中。

控制台
从上面的示例中记录的控制台消息将显示在此处。

属性

此组件没有可用的属性。

事件

此组件没有可用的事件。

方法

此组件没有可用的公共方法。

CSS 阴影部分

名称描述
icon重新排序句柄的图标(使用 ion-icon)。

CSS 自定义属性

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

插槽

此组件没有可用的插槽。