离子列表在按时更改项目的颜色

Question

我有一个可单击的ion-item的ion-list 。 我只想在单击时更改列表中所选项目的颜色； 因此，当用户停止按该项目时，其颜色将更改为默认颜色。
我只能在按下该项目时发现更改颜色，但是即使我停止按下该项目，该颜色仍然保留。

编辑：这是列表的html代码：

<ion-list>
<ion-item *ngFor="let tag of tagList; let i=index" (click)="addSelectedTag(i)">
<h2> {{tag.val().name}}</h2>
</ion-item>
</ion-list>

Answer 1

为此，您需要设置以下sass变量（在您的variables.scss ）文件：

$list-ios-activated-background-color: #d9d9d9;
$list-md-activated-background-color: #f1f1f1;
$list-wp-activated-background-color: #aaa;

这些是默认颜色，因此请根据需要更改它们。

然后确保您的项目是按钮 （ 它们看起来不会像按钮，只是使用其可点击的属性和样式 ）：

<ion-list>
  <button ion-item *ngFor="let tag of tagList; let i=index (click)="addSelectedTag(i)">
    <h2> {{tag.val().name}}</h2>
  </button>
</ion-list>