Nativescript:滚动时,Listview项正在重用 [英] Nativescript: Listview items are reusing when scrolling
问题描述
我试图通过单击存储[<Label>
] 将产品添加到购物车.然后,我正在更改该添加列表的标签颜色.
I am trying to add products to Cart by clicking STORE [<Label>
]. Then, I am changing label's color for that added list.
在那之后,我试图通过滚动添加更多产品.自动地,其他ListView
列表的标签颜色更改了.
After that, I am trying to add more products, by scrolling. Automatically, some other ListView
list's label color changed.
我知道这些行为将在iOS
的UITableView
中发生.借助NSDictionary
,我可以解决这个问题. 在iOS中重新使用Tableview
I know these behaviour will happen in UITableView
in iOS
. With the help of NSDictionary
, I can handle this. Tableview Reusing in iOS
我不知道如何在NativeScript
编码
.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="" 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";
}
输出:
推荐答案
您正在直接更改渲染对象的颜色,因为当回收对象时,该颜色会保持该颜色.
you are directly changing color of the rendered object because of which when object is recycled it persist that color.
您可以通过单击对象时更改对象属性来达到相同的效果.并基于该属性应用样式.像className="{{isClicked?'clickedCart':'notClickedCart'}}"
或stle.color="{{isClicked?'red':'blue'}}"
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'}}"
这是更新的游乐场演示: https://play.nativescript.org/?template=play-js&id=T6sna8&v=8
here is updated playground demo:https://play.nativescript.org/?template=play-js&id=T6sna8&v=8
编码
.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="" textWrap="true" tap="cartColorChange" />
</StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
.css
Label.clickedCart{
color:rgb(171, 0, 230);
}
Label.notClickedCart{
color:gray;
}
这篇关于Nativescript:滚动时,Listview项正在重用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!