时间戳

首页 > 解决方案 > 在 Ionic 中实现多选功能（长按/按住并选择）

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

问题描述

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

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

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

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

标签： androidangularionic-frameworkmulti-selectlong-press

解决方案

尝试这个 -

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

推荐阅读