在 Nativescript-vue 中更改 ListView 中所选项目的背景颜色答案

【问题标题】：Change background color of selected item in ListView in Nativescript-vue在 Nativescript-vue 中更改 ListView 中所选项目的背景颜色
【发布时间】：2020-07-03 07:46:56
【问题描述】：

我希望在 Nativescript-vue 的 ListView 中更改所选项目的背景颜色。目前，当我单击一个项目时，它会“闪烁”灰色，就像它被选中一样，但会立即恢复为白色背景。

我的最终目标是拥有一个用户可以滚动浏览的列表，选择一个项目，然后单击“编辑”按钮。所选项目的视觉提示至关重要。

渲染：

<template>
    <page class="page" >

        <ActionBar class="action-bar">
            <Label class="action-bar-title" text="Manage Accounts"></Label>
        </ActionBar>

        <StackLayout>
            <Button text="Add" />

            <ListView for="account in accountsList" @itemTap="onItemTap" class="h2" style="height:150px">
                <v-template>
                    <FlexboxLayout flexDirection="row">
                        <Label :text="account.name" />
                    </FlexboxLayout>
                </v-template>
            </ListView>

            <!-- <ListPicker :items="accountsList" v-model="selectedItem" /> -->
            <Button text="Edit" @tap="tapEdit" />
            <Button text="Return" @tap="returnButton" />
        </StackLayout>
    </page>
</template>

方法：


onItemTap(event) {
                    const itemIndex = event.index;
                    // this.accounts[event.index].bgColor = "#3489db";
                    console.log(itemIndex);
                }

通过堆栈进一步挖掘，我遇到了这个问题/解决方案 - How can I change color / backgroundColor of list item in nativescript-vue?，这似乎与我想要做的完全一样。我缺乏足够的分数来发表评论，但如果有人知道路易斯如何解决可能是理想的问题。遵循他的链接解决方案，可以在更传统的 NS 应用程序中了解 Ios 的细节，而我目前对 NS-vue 的风格还比较熟悉。

谢谢。

【问题讨论】：

标签： listview nativescript-vue

【解决方案1】：

在同一个问题上花费了无数个小时后，找到了解决方案。
当我遇到问题时，我正在使用RadListView

问题

如何在选择项目时设置背景颜色或任何属性。

解决方案

onItemTap 事件参数比看起来有更多的属性，

项目
事件名称
对象
索引
查看

RadListViewitemSelected / itemDeselected 事件也是如此。
你去吧。当您看到view 属性时，所有问题都解决了。
例如你可以设置
view.color = #ff0000

PS：如果我们不设置任何样式，RadListView 似乎存储了选定项目的状态并在取消选择时将其恢复。不过，还没有检查过ListView。

【讨论】：