如何更改 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。

This is expected behavior because the ListView's item template is rendered and updated by the list view when scrolling (view recycling) if you need to make sure the list view is updated when you change your property, call refresh on it.

所以解是


<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 中列表项的颜色/背景颜色？

How can I change color / backgroundColor of list item in nativescript-vue?

nativescript

nativescript-vue