Skip to main content

ion-reorder

shadow

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

¥Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a reorder group to provide a visual drag and drop interface.

重新排序是用于拖放项目的锚点。重新排序完成后，将从重新排序组中调度 ionItemReorder 事件，并且需要调用 complete 方法。

¥The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the ionItemReorder event will be dispatched from the reorder group and the complete method needs to be called.

基本用法​

¥Basic Usage

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

¥The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the disabled property on the reorder group to false. The reorder icon can then be used to drag and drop the items and reorder them.

Console
Console messages will appear here when logged from the example above.

切换重新排序​

¥Toggling Reorder

在某些情况下，可能需要切换重新排序功能的选项。这可以通过基于函数或变量使 disabled 属性具有反应性来完成。

¥In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the disabled property reactive, based on a function or variable.

Console
Console messages will appear here when logged from the example above.

自定义重新排序图标​

¥Custom Reorder Icon

重新排序组件使用一个重新排序图标，在 iOS 上为三行，在 Material Design 上为两行。这可以通过在重新排序中添加 图标 组件以及任何可用的 Ionicon 来进行自定义。

¥The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an Icon component inside of the reorder with any of the available Ionicons.

Console
Console messages will appear here when logged from the example above.

重新排序封装​

¥Reorder Wrapper

重新排序还可以用作项目的封装器，使项目本身成为锚点。单击下面项目的任意位置并将其拖动以重新排序列表。

¥Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.

Console
Console messages will appear here when logged from the example above.

更新数据​

¥Updating Data

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

¥When the complete method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync.

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

¥In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the complete method. The complete method will sort the array and return it so it can be reassigned. Note that passing the array will prevent Ionic from reordering the DOM nodes.

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

¥In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, false should be passed as a parameter to the complete method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.

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

¥Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using trackBy for Angular, and key for React and Vue.

Console
Console messages will appear here when logged from the example above.

与虚拟滚动一起使用​

¥Usage with Virtual Scroll

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

¥Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.

Console
Console messages will appear here when logged from the example above.

属性​

¥Properties

No properties available for this component.

事件​

¥Events

No events available for this component.

方法​

¥Methods

No public methods available for this component.

CSS 阴影部分​

¥CSS Shadow Parts

NameDescription
iconThe icon of the reorder handle (uses ion-icon).

CSS 自定义属性​

¥CSS Custom Properties

No CSS custom properties available for this component.

插槽​

¥Slots

No slots available for this component.

目录