在 Ionic 中实现多选功能（长按/按住并选择）

Question

我正在做一个有列表的 Ionic 项目。我想要一个多选功能就像 android 库中的按住和选择功能，以便在长按复选框时出现在列表项的前面，使我能够选择多个项目。

关于如何实施的任何建议？我不是在寻找 GalleryView 功能，只是长按并选择功能，就像它一样。

是否可以不创建实际的复选框？还是我需要创建复选框并实现暂停事件？

注意：对于是否要实现android图库功能感到困惑的人，请注意！我不想在这里实现 android 图库功能。我只想在简单列表上实现 MULTI-SELECT 功能，就像我们在 android 图库中长按选择多个图像一样，甚至以在联系人列表中选择多个联系人等为例。

Answer 1

试试这个 -

<ion-header>
<ion-navbar color="primary">
<ion-title>Notifications</ion-title>
<ion-buttons end *ngIf=selection>
  <button ion-button tappable (click)=disableSelect()>
    <ion-icon name="close" style="zoom:1.5;"></ion-icon>
  </button>
  </ion-buttons>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <div *ngFor="let notification of notifications; let i=index" tappable text-wrap (click)=!selection?toggleGroup(i):selectItem(i,notification)
 (press)=selectItem(i,notification) [ngStyle]="{'background-color': notification.isSelected ? '#f2f2f2' : '#ffffff'}">
 </div>
</ion-content>

对于打字稿

export class NotificationPage {
notifications = new Array<Notification>();
selection: boolean = false;

constructor() {}

public selectItem(index: number, notification: Notification) {
   this.selection = true;
   notification.isSelected = !notification.isSelected;
   this.notifications[index] = notification;
 }

public unselectAll() {
   this.selection = false;
   this.notifications.forEach(notification => {
     notification.isSelected = false;
   });
  }
}

我使用了两个变量，第一个在名为isSelected 的模型类中。其目的是确定是否选择了特定项目。此外，项目样式是使用基于相同标志的[NgStyle] 完成的。第二个是在名为selected 的页面中。其目的是在选择项目后对 UI 进行必要的更改。