Ionic重新排序

Ionic提供了用于重新排序功能的<ion-reorder>组件。它允许你拖放列表项, 从而更改列表元素的顺序。 <ion-reorder>组件需要与<ion-reorder-group>一起使用, 以提供可视的拖放界面。 <ion-reorder-group>充当<ion-reorder>内部列表元素的包装。

用户将项目列表拖放到新位置后,

ionItemReorder

事件已调度。应该实现相应的处理程序, 该处理程序将

完成()

方法。 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);
  }
}

输出：

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

接下来, 将任何项目从列表中拖放到新位置。例如, 我们将Robert项目拖动到了第四位置, 如下图所示。你还将在控制台中收到一条消息, 指示将项目从0移到3。