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

Question

我想在用户点击项目时更新所选项目的样式。 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>

Answer 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