Question

我正在制作一个有列表的离子项目。我想要一个多选功能就像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: Array<NotificationPojo> = new Array<NotificationPojo>();
selection: boolean = false;

constructor(
public navParams: NavParams,
private alertCtrl: AlertController
 ) {}

 public selectItem(index: number, notification: NotificationPojo) {
// alert ("INsiede item selection");
this.selection = true;
notification.isSelected = notification.isSelected ? false : true;
this.notifications[index] = notification;
}

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

以上逻辑的工作方式就像我已经标记了一个标志，让我知道选择是否开始。对于特定项目，请选择“我已将变量添加到该项目的页面”，该变量将确定是否选择了特定项目。为了显示是否选择了一个项目，我已经在项目[NgStyle]上使用了press用户。在Ionic Press中是指点击并按住。

在Ionic中实施多重选择功能（长按/保持并选择）

1 个答案: