android - 在 Ionic 中实现多选功能(长按/按住并选择)

Question

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

关于如何实现它有什么建议吗？我不是在寻找 GalleryView 功能，只是长按并选择功能，就像它一样。

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

注意:对我是否要实现android gallery功能感到困惑的 friend 请注意!我不想在这里实现 android gallery 功能。我只想在简单列表上实现多选功能，就像我们在 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>

typescript

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 进行必要的更改。