Change background color of selected item in ListView in Nativescript-vue

Viewed 823

I'm looking to change the background color of a selected item in a ListView in Nativescript-vue. Presently when I click an item it "flashes" gray as if its been selected but immediately reverts back to a white background.

My end-goal is to have a list that the user can scroll thru, select an item, and then click an "edit" button. The visual cue for what item has been selected is critical.

Rendering:

<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>

Method:


onItemTap(event) {
                    const itemIndex = event.index;
                    // this.accounts[event.index].bgColor = "#3489db";
                    console.log(itemIndex);
                }

Digging further thru the stacks, I encountered this issue / solution - How can I change color / backgroundColor of list item in nativescript-vue? , which seems exactly like what I'm looking to do. I lack sufficient points for posting a comment, but if someone knows how Louis solved the problem that would likely be ideal. Following his linked solution results in specifics for Ios in a more traditional NS app, and I am only mildly familiar with the NS-vue flavor presently.

Thank you.

1 Answers

After many countless hours sitting upon the same issue, found the solution.
I was workng with RadListView while i encountered the problem

Problem

How to set backgroundColor or any property for that matter while the item is selected.

Solution

The onItemTap event argument have more properties than it would seem otherwise namely,

  • item
  • eventName
  • object
  • index
  • view

Same is true for RadListView itemSelected / itemDeselected events.
There you go. All the problems are solved when you see the view property.
For example you can set
view.color = #ff0000

PS: It seems that RadListView stores the state of selected item and reverts it back on deselection if we don't set any styles. Havn't checked for ListView though.

Related