Question

我已经阅读了Nativescript ListView文档并搜索了Google，无法找到任何方法来突出显示当前所选的Listview项目......这甚至可能吗？如果是这样我怎么能去做呢？

我的代码：

<ListView [items]="activeStockTakes" class="list-group" (itemTap)="selectActiveStockTake($event)">
                    <template let-activeStockTake="item">
                        <StackLayout>
                            <Label class="list-group-item" [text]="activeStockTake.UserCode + ' - ' + activeStockTake.Comment"></Label>
                        </StackLayout>
                    </template>
                </ListView>

Answer 1

当然可以！

定义一个类＆＃34;突出显示＆＃34;在CSS中：

.highlight {
  background-color: #eee;
}

然后根据视图中的条件分配它：

<StackLayout [class.highlight]="selectedItem && activeStockTake.UserCode === selectedItem.UserCode">

selectedItem属性在您的组件中定义，并在列表中选择项目时进行分配/更新。

Answer 2

我遇到了同样的问题，Eddy的回答帮助我解决了问题。

2个css类：已选择和未选中。

通过添加let-i =＆＃34; index＆＃34;来获取listview元素索引;到模板。

使用class =＆＃34;取消选择＆＃34;

设置默认类

使用数据绑定有条件地更改所选列表视图项的类[class.Selected] =＆＃34; i === selectedIndex＆＃34;

使用（tap）=＆＃34; selectMenu（i）＆＃34;

将所选元素的索引输入到组件

在组件中，创建变量selectedIndex并将其设置为等于所选元素的索引。

点击元素现在将更改其CSS类。如果您选择了一个元素并从列表中点击其他元素，则新元素将被选中，第一个选择将被取消选择。

CSS

    <ListView [items]="submenu">
        <template let-item="item" let-i="index">
            <Label [class.Selected]="i===selectedIndex" [text]="item" class="Unselected" (tap)="selectMenu(i)"></Label>
        </template>
    </ListView>

TS

selectedIndex: number;

selectMenu(i) {
    this.selectedIndex=i;
}

Angular2 / Nativescript：如何突出显示ListView的选定项？

2 个答案: