在 Ionic 中实现 Multi Select 特征（Long press/Hold 和 select）

Question

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

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

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

注意：还在纠结我是否要实现android图库功能的朋友请注意！我不想在这里实现 android 图库功能。我只想在简单列表上实现 MULTI-SELECT 功能，就像我们在 android 画廊中长按 select 多个图像一样，甚至以 [=31= 为例]在联系人列表中添加多个联系人等

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 的模型 class 中。其目的是确定是否选择了特定项目。此外，项目样式是使用基于相同标志的 [NgStyle] 完成的。其次是在名为 selected 的页面本身中。其目的是在选择项目后UI进行必要的更改。

在 Ionic 中实现 Multi Select 特征（Long press/Hold 和 select）

Implement Multi Select feature (Long press/Hold and select) in Ionic

android

multi-select

long-press

ionic-framework

angular