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>

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

1 个答案: