跳到主要内容
版本:v7

ion-reorder

shadow

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

重新排序锚点用于拖放项目。重新排序完成后,ionItemReorder 事件将从重新排序组分发,并且需要调用 complete 方法。

基本用法

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

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

切换重新排序

在某些情况下,可能需要提供切换重新排序功能的选项。这可以通过使 disabled 属性基于函数或变量变为响应式来实现。

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

自定义重新排序图标

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

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

重新排序包装器

Reorder 也可以用作项目的包装器,使项目本身成为锚点。点击下方项目的任意位置并拖动即可重新排序列表。

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

更新数据

当在重新排序组上调用不带参数的 complete 方法时,DOM 节点将被重新排序。如果项目是从需要排序的数据数组中渲染的,这可能导致数据和 DOM 不同步。

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

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

无论采用哪种方法,如果项目在循环中提供,则应为重新排序项目提供稳定的标识。这意味着 Angular 使用 track,React 和 Vue 使用 key

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

与虚拟滚动一起使用

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

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

属性

该组件没有可用的属性。

事件

该组件没有可用的事件。

方法

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

CSS 阴影部分

Name说明
iconThe icon of the reorder handle (uses ion-icon).

CSS 自定义属性

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

插槽

该组件没有可用的插槽。