按下时更改多个项目图像

Question

ionic 2 的新手，正在寻找在 ion-list >> ion-item >> avatar 图像上实现多 select 复选框功能。这意味着，在联系人列表中，用户应该能够按住并 select 来自该列表的多个联系人。使用复选框和 select?

将头像图像更改为头像图像的任何 css 内置或自定义方法

（如有不明白请告知，谢谢）

Answer 1

最好的方法可能是没有复选框（或用 css 伪造它），然后在您的组件中创建一个 selectedList，它将跟踪点击了哪些头像（假设他们有f.e。一个 id 作为标识符）。

Html:

<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="has-header">
  <ion-list>
   <ion-item *ngFor="let contact of contactList">
      <ion-avatar (click)="clickedAvatar(contact.id)"
         [class]="isInArray(contact.id) ? 'selected' : 'not-selected'"
            item-left>
            <img src="https://pickaface.net/assets/images/slides/slide2.png"/> <!-- get image from contact object --> 
        </ion-avatar>
        <h2>{{contact.name}}</h2> <!-- etc -->
   </ion-item>
</ion-list> 
</ion-content>

ts:

import { Component } from '@angular/core';


@Component({
  templateUrl:"page1.html"
})
export class Page1{
  contactList: any[];

  selectedContacts: any[];

    constructor(){
       this.selectedContacts = [];
       this.contactList = [{
    id: 1,
    name: "Steve"
  },
  {
    id: 2,
    name: "Mark"
  },
  {
    id: 3,
    name: "Lauren"
  }];
    }

    clickedAvatar(id: number){

      console.log(this.selectedContacts);
       if(this.isInArray(id)){
         let index = this.selectedContacts.indexOf(id);

         this.selectedContacts.splice(index,1);
       }else{
          this.selectedContacts.push(id);
          console.log(this.selectedContacts.indexOf(id));
       }
    }

    isInArray(id: number): boolean{
      let check: boolean = false;
      for(let contactId of this.selectedContacts){
         if(contactId == id){ 
           check = true;
         }
      }
      return check;
    }
}

css

.selected img{
    opacity: 0.4;
}

(click) 事件将在点击和长按时执行。如果您只想使用点击或实际按住，您应该将 (click) 更改为 (press) 或 (tap)。

（凭记忆写的，所以可能是不正确的类名或某处的拼写错误 :)）。（我会尝试创建一个 plunkr）

按下时更改多个项目图像

Change multiple item images when pressed

mobile

hybrid

ionic-framework

ionic2

angular