ion list 按下时更改项目的颜色

Question

我有一个ion-list 或ion-item 是可点击的。我想在单击时更改列表中所选项目的颜色，并且仅在那一刻；因此，当用户停止按下该项目时，其颜色将变为默认颜色。
我只能在按下项目时更改颜色，但即使在我停止按下项目后颜色仍然存在。

编辑：这是列表的 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>