Question

我正在寻找在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风格仅稍为熟悉。

谢谢。

Answer 1

在经历了无数小时的讨论后，找到了解决方案。
遇到问题时，我正在与RadListView一起工作

问题

在选择项目时如何设置backgroundColor或任何属性。

解决方案

onItemTap事件参数的属性比其他情况要多，

项目
eventName
对象
索引
视图

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

PS：似乎RadListView存储了选定项目的状态，如果我们未设置任何样式，则在取消选择时将其还原。尚未检查ListView。

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

1 个答案:

问题

解决方案