Ionic重新排序 _Ionic重新排序

Ionic提供了用于重新排序功能的< ion-reorder> 组件。它允许你拖放列表项, 从而更改列表元素的顺序。 < ion-reorder> 组件需要与< ion-reorder-group> 一起使用, 以提供可视的拖放界面。 < ion-reorder-group> 充当< ion-reorder> 内部列表元素的包装。
用户将项目列表拖放到新位置后,
ionItemReorder
事件已调度。应该实现相应的处理程序, 该处理程序将
【Ionic重新排序】完成()
方法。 ionItemReorder事件包含几个属性, 这些属性包含有关重新排序信息的所有相关信息。这些信息包括
从
索引
至
新索引。

在很多地方, 例如歌曲曲, 待办事项列表项等, 此功能都是必不可少的。下面的示例让我们了解重新排序组件的工作方式。

例
在此示例中, 我们将讨论如何实现重新排序组件以允许将项目拖放到新位置。在这里, 我们还将通过调用complete()方法来更新列表项。
Home.page.html
HTML页面包含< ion-reorder-group> 组件内部的列表项目, 这些列表项目使用angular * ngFor指令对items数组进行了迭代。在< ion-reorder-group> 中, 我们将禁用属性设置为false, 这将启用拖放功能。 ionItemReorder是一个事件, 它使你可以完成商品的重新排序。

< ion-header translucent> < ion-toolbar> < ion-title> Ionic Reorder< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="ion-padding"> < ion-list> < ion-reorder-group (ionItemReorder)="onRenderItems($event)" disabled="false"> < ion-item *ngFor="let item of listItems"> < ion-label> {{item}}< /ion-label> < ion-reorder> < /ion-reorder> < /ion-item> < /ion-reorder-group> < /ion-list> < ion-list class="ion-text-center"> < ion-button (click)="getList()"> Get Updated List< /ion-button> < /ion-list> < /ion-content>

Home.page.ts
该页面包含onRenderItems（$ event）的实现。它包含所拖动项目的从和到索引。然后, 它使用splice()方法, 该方法从数组中删除拖动的项目, 并将其分配给变量draggedItem。之后, 它将调用complete()方法以完成重新排序操作。

import { Component } from '@angular/core'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {listItems: any; constructor() {this.listItems = ['Roberts', 'Peter', 'Tiffany Waugh', 'Sheila Bauch', 'Diana Gerhold', 'John Kuhn']; }onRenderItems(event) {console.log(`Moving item from ${event.detail.from} to ${event.detail.to}`); const draggedItem = this.listItems.splice(event.detail.from, 1)[0]; this.listItems.splice(event.detail.to, 0, draggedItem); // this.listItems = reorderArray(this.listItems, event.detail.from, event.detail.to); event.detail.complete(); }getList() {console.table(this.listItems); }}

输出：
当你执行该应用程序时, 它将给出以下输出。