android – 在Ionic中实现多重选择功能(长按/保持并选择)

2019年7月28日 193次阅读

我正在研究一个有列表的离子项目.我想要一个多选功能,就像
Android画廊中的保持和选择功能一样,这样长按复选框就会出现在列表项的前面,让我可以选择多个项目.

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

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

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

最佳答案 试试这个 –

<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].在离子按中意味着点击并按住.

点赞