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

我有一个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>

来源

2017-06-20 User999

是从'ngFor来的itens '还是你很难编码它们？ –

您能否请添加该列表的html代码？ – sebaferreras

好的，我用html代码修改了这个问题。 – User999

为了做到这一点，你需要设置以下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>

来源

2017-06-20 13:46:59 sebaferreras

这只适用于列表内的按钮项目（'''），如果op在列表中有一个正常的''，这将不起作用。 +1简单的解决方案。 –

你是绝对正确的...因为OP没有包含代码，所以我认为这些项目是_button items_（用户提到的_ [...]可点击._）。如果这不是真实的场景，我会要求用户包含代码以防万一。感谢您指出这一点:) – sebaferreras

我已经修改了问题的HTML代码！谢谢 – User999

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

回答

相关问题