Nativescript: Listview Items Are Reusing When Scrolling

I am trying to add products to Cart by clicking STORE []. Then, I am changing label's color for that added list. After that, I am trying to add more products, by scro

Solution 1:

you are directly changing color of the rendered object because of which when object is recycled it persist that color.

you can achieve same effect by changing object property when clicked. and based on that property applying styles. like className="{{isClicked?'clickedCart':'notClickedCart'}}" or stle.color="{{isClicked?'red':'blue'}}"

here is updated playground demo:https://play.nativescript.org/?template=play-js&id=T6sna8&v=8

Coding

.js

exports.cartColorChange = function(args) {
    var lbl = args.object;
    var item=lbl.bindingContext;
    var index = secondArray.indexOf(item)
    console.log("Clicked item with index " + index);
    item.isClicked = !item.isClicked;
    secondArray.setItem(index,item);
    // lbl.color = "rgb(171, 0, 230)";
};

.xml

<ListViewcol="0"row="2"items="{{ mySecondItems }}"id="myListVw"itemLoading="listViewItemsLoading"itemTap="secondListViewItemTap"class="list-group"separatorColor="transparent"><ListView.itemTemplate><GridLayoutclass="listGrid"columns="75,*"rows="*"width="100%"height="90" ><Labelcol="0"row="0"class="roundCircle"text="{{ price }}"textWrap="true"  /><StackLayoutcol="1"row="0"orientation="vertical"verticalAlignment="center"><Labelclass="booksubtitle"text="{{ subtitle }}"textWrap="true"id="wow"  /><Labelclass="bookTitle"text="{{ title }}"textWrap="true"  /><Labelclass="addCart"className="{{isClicked?'clickedCart':'notClickedCart'}}"text="&#xf291;"textWrap="true"tap="cartColorChange" /></StackLayout></GridLayout></ListView.itemTemplate></ListView>

.css

Label.clickedCart{
    color:rgb(171, 0, 230);
}

Label.notClickedCart{
    color:gray;
}

Solution 2:

Yes listview items are indeed reused in order to save up memory.

Here you can find the approach used to save your problem which consists in binding the listview item to a certain property in your model.