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

Question

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

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

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

注意：对于我是否要实现android画廊功能感到困惑的人，请注意！我不想在这里实现 android 画廊功能。我只想在简单列表上实现一个多选功能，就像我们在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 进行必要的更改。