如何更改 nativescript-vue 中列表项的颜色/背景颜色？

Posted 2023-04-13

【中文标题】如何更改 nativescript-vue 中列表项的颜色/背景颜色？

【英文标题】：How can I change color / backgroundColor of list item in nativescript-vue?

【发布时间】：2019-12-08 09:58:55

【问题描述】：

我想在用户点击项目时更新所选项目的样式。 nextIndex/event.index 已更新，但样式不适用。感谢您的帮助。

https://play.nativescript.org/?template=play-vue&id=ihH3iO

export default 
  name: "CustomListView",
  props: ["page", "title", "items", "selectedIndex"],
  data() 
    return 
      nextIndex: this.selectedIndex ? this.selectedIndex : undefined
    ;
  ,
  methods: 
    onItemTap(event) 
      this.nextIndex = event.index;
    
  
;

.selected 
  color: white;
  background-color: black;

<ListView for="(item, index) in items" @itemTap="onItemTap">
    <v-template>
    <Label :class="['list-item-label',  selected: index == nextIndex ]" :text="item" />
    </v-template>
</ListView>

【问题讨论】：

你可以创建一个游乐场吗？

@Narendra 我用游乐场网址更新了问题，谢谢！

【参考方案1】：

有关此issue 的更多信息。

这是预期行为，因为 ListView 的项目模板在滚动时由列表视图呈现和更新（视图回收）如果您需要确保在更改属性时更新列表视图，请对其调用刷新。

所以解决办法是

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ListView v-for="(item, index) in items" @itemTap="onItemTap" ref="listView">
            <v-template>
                <Label :class="[selected: index === nextIndex, 'list-item-label']"
                    :text="item" />
            </v-template>
        </ListView>
    </Page>
</template>

<script>
    export default 
        name: "CustomListView",
        data() 
            let selectedIndex = 2;
            return 
                items: ["Bulbasaur", "Parasect", "Venonat", "Venomoth"],
                nextIndex: selectedIndex
            ;
        ,
        methods: 
            onItemTap(event) 
                this.nextIndex = event.index;
                this.$refs.listView.nativeView.refresh();
            
        
    ;
</script>

你需要刷新你的listView，代码是this.$refs.listView.nativeView.refresh();

别忘了在<ListView> 上添加ref

【讨论】：

感谢 Steven，您的代码运行良好。但是我想问一下强制列表刷新每个水龙头是否有任何缺点。我发现这也可以通过 itemLoading 和设置 cell.selectedBackgroundView.backgroundColor 而无需刷新列表来实现。

真是个惊喜！

你能告诉我你在哪里找到关于itemLoading & setting the cell.selectedBackgroundView.backgroundColor的信息吗？

@Steven 这是我找到的解决方案。 ***.com/questions/36335252/…