Nativescript: Listview items are reusing when scrolling

问题

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

After that, I am trying to add more products, by scrolling. Automatically, some other ListView list's label color changed.

I know these behaviour will happen in UITableView in iOS. With the help of NSDictionary, I can handle this. Tableview Reusing in iOS

I dont know how to handle this in NativeScript

Coding

.js

exports.cartColorChange = function(args) {
    var lbl = args.object;
    lbl.color = "rgb(171, 0, 230)";
};

.xml

<ListView col="0" row="2" items="{{ mySecondItems }}" id="myListVw" itemLoading="listViewItemsLoading" itemTap="secondListViewItemTap" class="list-group" separatorColor="transparent">
<ListView.itemTemplate>

<GridLayout class="listGrid" columns="75,*" rows="*" width="100%" height="90" >
  <Label col="0" row="0" class="roundCircle" text="{{ price }}" textWrap="true"  />

  <StackLayout col="1" row="0" orientation="vertical" verticalAlignment="center">
       <Label class="booksubtitle" text="{{ subtitle }}" textWrap="true" id="wow"  />
       <Label class="bookTitle" text="{{ title }}" textWrap="true"  />
       <Label class="addCart" text="&#xf291;" textWrap="true" tap="cartColorChange" />

  </StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>

.css

Label.addCart{

    text-align: right;
    color: rgb(220, 220, 220);
    margin-right: 15px;
    margin-bottom: 0px;
    font-size: 15px;
    font-family: "FontAwesome";
}

Output:

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

<ListView col="0" row="2" items="{{ mySecondItems }}" id="myListVw" itemLoading="listViewItemsLoading" itemTap="secondListViewItemTap" class="list-group" separatorColor="transparent">
<ListView.itemTemplate>

<GridLayout class="listGrid" columns="75,*" rows="*" width="100%" height="90" >
  <Label col="0" row="0" class="roundCircle" text="{{ price }}" textWrap="true"  />

  <StackLayout col="1" row="0" orientation="vertical" verticalAlignment="center">
       <Label class="booksubtitle" text="{{ subtitle }}" textWrap="true" id="wow"  />
       <Label class="bookTitle" text="{{ title }}" textWrap="true"  />
       <Label class="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;
}

回答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.

来源：https://stackoverflow.com/questions/50577389/nativescript-listview-items-are-reusing-when-scrolling

标签

javascript

xml

nativescript