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

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>

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

ion list change the color of an item when is pressed

html

sass

ionic2

ionic3