Skip to content Skip to sidebar Skip to footer

Nativescript: Listview Items Are Reusing When Scrolling

I am trying to add products to Cart by clicking STORE [

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.

Post a Comment for "Nativescript: Listview Items Are Reusing When Scrolling"