ionic 重排

📌 相关文章

📜 ionic 重排

📅 最后修改于: 2021-01-03 04:55:12 🧑 作者: Mango

Ionic提供了用于重新排序功能的组件。它可以让你拖放列表项，从而改变列表元素的顺序。组件需要与一起使用，以提供可视的拖放界面。充当中列表元素的包装。

例

在此示例中，我们将讨论如何实现重新排序组件以允许将项目拖放到新位置。在这里，我们还将通过调用complete()方法来更新列表项。

Home.page.html

HTML页面包含组件内部的列表项，这些列表项使用angular * ngFor指令对items数组进行了迭代。在中，我们设置了禁用属性false ，该属性启用了拖放功能。 ionItemReorder是一个事件，它可以完成项目的重新排序。


  
    Ionic Reorder
  



  
    
      
        
          {{item}}
        
        
      
    
  
  
    Get Updated List

主页

该页面包含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 。