如何在nativescript-vue中更改列表项的颜色/背景颜色？ [英] How can I change color / backgroundColor of list item in nativescript-vue?

问题描述

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

推荐答案

有关此issue的详细信息。

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

因此解决方案是

<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

这篇关于如何在nativescript-vue中更改列表项的颜色/背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！